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

Question

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

该组件基本上充当两个屏幕之间的切换器，单击“ Explore ”时显示Explore屏幕，单击My Community My Community时显示“我的社区”屏幕

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

提前致谢！！！

Answer 1

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

使用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是一个很棒的库，可以帮助你做到这一点。 您可能需要查看底部标签、 材料底部标签或材料顶部标签。