如何更改DrawerNavigator内容本机反应

Question

我的应用中同时有DrawerNavigator和StackNavigator。有两个用户members和limited个用户。

因此，当limited用户登录时，我想从MyProfile中删除DrawerNavigator，并且应该显示member登录MyProfile的时间。如何实现这一目标。请查看我的代码。

const AppNavigator = createStackNavigator(
{
    Splash: { screen: Splash },
    Login: { screen: Login },
    Home: { screen: Home },
    About: { screen: About },
    ListEvents: { screen: ListEvents }
},
{
    initialRouteName: 'Splash',
    headerMode: 'none'
}
);

const DrawerNavigator = createDrawerNavigator({
    Home: AppNavigator,
    MyProfile: { screen: MyProfile },
    About: { screen: About }
});

const MainNavigation = createSwitchNavigator({
    HomeDrawer: DrawerNavigator,
    AuthStack: AppNavigator
})

const AppContainer = createAppContainer(MainNavigation);

export default AppContainer;

如何在上述代码中实现我的结果？我不知道该怎么做。

Answer 1

假设您有一个布尔值限制，那么您可以根据条件传递给函数以获取AppContainer

export default function AppContainer(limited) {
  const AppNavigator = createStackNavigator(
    {
      Splash: { screen: Splash },
      Login: { screen: Login },
      Home: { screen: Home },
      About: { screen: About },
      ListEvents: { screen: ListEvents }
    },
    {
      initialRouteName: "Splash",
      headerMode: "none"
    }
  );

  const DrawerNavigator = limited
    ? createDrawerNavigator({
        Home: AppNavigator,
        About: { screen: About }
      })
    : createDrawerNavigator({
        Home: AppNavigator,
        MyProfile: { screen: MyProfile },
        About: { screen: About }
      });

  const MainNavigation = createSwitchNavigator({
    HomeDrawer: DrawerNavigator,
    AuthStack: AppNavigator
  });

  return createAppContainer(MainNavigation);
}

然后在您的AppRegistry组件中使用它

import React from "react";
import AppContainer from "./AppContainer";

export default class App extends React.Component {
  render() {
    const limited = true; // set true or false
    const Navigation = AppContainer(limited);
    return <Navigation />;
  }
}