如何在 React Native 中添加屏幕切换器组件

Question

作为一个应用开发领域的新手，我其实不知道这个UI组件的名字。

这个组件基本上充当两个屏幕之间的切换器，当点击Explore时显示Explore屏幕，当My Community时显示My Community屏幕被点击了

请有人帮我知道如何调用这个组件以及需要使用哪个 npm 包来部署它。

提前致谢！！！

Answer 1

您可以使用switch 组件及其布尔值有条件地显示不同的屏幕/组件。

使用setState的基本示例：

const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  
return (
  <View>
    <Switch
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
      {isEnabled ? <Text>Placerholder Screen 1</Text> : <Text>Placerholder Screen 2</Text>}
    </View>
  );

但在这种情况下，我建议您使用 Tabs 而不是 Switch。 React Navigation 是一个很好的库来帮助你。您可能想查看bottom tabs、material bottom tabs 或material top tabs。