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

Question

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

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

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

提前致谢！！！

Answer 1

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

使用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是一个很好的库来帮助你。您可能想查看底部标签、材料底部标签或材料顶部标签。