如何在 React Native 中创建私有屏幕？答案

【问题标题】：How to create private screen in React Native?如何在 React Native 中创建私有屏幕？
【发布时间】：2020-02-01 12:03:21
【问题描述】：

我使用 react native 和 react-navigation。现在我有：

const MainNavigator = createMaterialTopTabNavigator({
    Users: {screen: Users},
    Login: {screen: Login}
},{
    initialRouteName: 'Users',
});

const Navigator = createAppContainer(MainNavigator);


export default function App() {
  return (
      <Provider store={store}>
          <Navigator/>
      </Provider>
  );
}

但是如何仅为登录用户添加私人屏幕？如果这个用户是访客，那么我不想在导航栏中显示私人屏幕，否则，如果用户已登录，则显示它。

【问题讨论】：

什么是私人屏幕？
私屏是app的一个模块。像另一个组件图像。此屏幕仅查看登录用户
为了分离访客用户和登录用户之间的导航，切换导航器是最好的选择，这是一篇向你展示它的流程的文章。 medium.com/the-react-native-log/…

标签： reactjs react-native react-native-navigation

【解决方案1】：

可以检查用户是否登录，然后动态添加私屏。

const navigationScreens = {
    Users: {screen: Users},
    Login: {screen: Login}
}

if(isUserLoggedIn) {
   navigationScreens["PrivateScreen1"] = {
      screen: MyPrivateScreen1
   } 
   navigationScreens["PrivateScreen2"] = {
      screen: MyPrivateScreen2
   } 
}

const MainNavigator = createMaterialTopTabNavigator(navigationScreens,{
    initialRouteName: 'Users',
});

...

【讨论】：