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

Question

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

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

谁能帮我知道这个组件叫什么，部署它需要用到哪个npm包。

提前致谢！！！

Answer 1

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

使用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 is a great library to help you with this. You may want to look at the bottom tabs, material bottom tabs or material top tabs.

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

How to add a screen switcher component in react native

react-native

react-native-component