Reactjs 基于登录到react native后的条件隐藏导航菜单

我已经使用抽屉导航菜单选项创建了导航菜单，我的菜单现在在登录后根据用户角色显示，我将从api中获得我想隐藏的特定菜单。如何做到这一点

我的菜单是这样的

const AppStack = createDrawerNavigator(
  {
    Onboarding: {
      screen: OnboardingScreen,
      navigationOptions: {
        drawerLabel: () => {}
      }
    },
    Home: {
      screen: HomeStack,
      navigationOptions: {
        drawerLabel: ({ focused }) => (
          <Drawer focused={focused} screen="Home" title="Home" />
        )
      }
    },
    Profile: {
      screen: ProfileStack,
      navigationOptions: navOpt => ({
        drawerLabel: ({ focused }) => (
          <Drawer focused={focused} screen="OrganizationListScreen" title="Organizations" />
        )
      })
    },
    Settings: {
      screen: SettingsStack,
      navigationOptions: navOpt => ({
        drawerLabel: ({ focused }) => (
          <Drawer focused={focused} screen="ContactListScreen" title="Contact" />
        )
      })
     },


    Login: {
      screen: LoginScreen,
      navigationOptions: {
        drawerLabel: () => {}
      }
    },
    Dashboard: {
      screen: DashboardStack,
      navigationOptions: {
        drawerLabel: ({ focused }) => (
          <Drawer focused={focused} screen="Dashboard" title="Dashboard" />
        )
      }
    },
    Order: {
      screen: OrderStack,
      navigationOptions: {
        drawerLabel: ({ focused }) => (
          <Drawer focused={focused} screen="ShoppingCart" title="Cart" />
        )
      }
    },
    ProductDetail: {
      screen: ProductDetailsScreen,
      navigationOptions:  {
        drawerLabel: () => {}

      }
    },
    OrgList: {
      screen: OrganizationListScreen,
      navigationOptions:  {
        drawerLabel: () => {}

      }
    },
    ContactList: {
      screen: ContactListScreen,
      navigationOptions:  {
        drawerLabel: () => {}

      }
    },
  },
  Menu
);

const AppContainer = createAppContainer(AppStack);
export default AppContainer

const-AppStack=createDrawerNavigator(
{
入职：{
屏幕：车载屏幕，
导航选项：{
抽屉标签：（）=>{}
}
},
主页：{
屏幕：HomeStack，
导航选项：{
抽屉标签：（{focused}）=>(
)
}
},
简介：{
屏幕：ProfileStack，
导航选项：navOpt=>({
抽屉标签：（{focused}）=>(
)
})
},
设置：{
屏幕：设置策略，
导航选项：navOpt=>({
抽屉标签：（{focused}）=>(
)
})
},
登录：{
屏幕：登录屏幕，
导航选项：{
抽屉标签：（）=>{}
}
},
仪表板：{
屏幕：仪表板堆栈，
导航选项：{
抽屉标签：（{focused}）=>(
)
}
},
订单：{
屏幕：OrderStack，
导航选项：{
抽屉标签：（{focused}）=>(
)
}
},
产品详情：{
屏幕：ProductDetailsScreen，
导航选项：{
抽屉标签：（）=>{}
}
},
组织名单：{
屏幕：OrganizationListScreen，
导航选项：{
抽屉标签：（）=>{}
}
},
联系人列表：{
屏幕：ContactListScreen，
导航选项：{
抽屉标签：（）=>{}
}
},
},
菜单
);
const-AppContainer=createAppContainer（AppStack）；
导出默认AppContainer

现在是否有任何选项，以便在成功登录后，我可以获得菜单集合，并操纵它们以显示和隐藏它们

谢谢

---

Utpal Maity

首先创建

customDrawer

如下： CustomDrawer.js

import React，{Component}来自'React'；
从“react native”导入{View、Text、ScrollView、TouchableOpacity}；
从“react navigation”导入{NavigationActions}；
从“@react native community/async storage”导入异步存储；
类CustomDrawer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
validUserMenu：[
键：“第一”，标题：“第一”，屏幕：“第一屏幕”，
键：“登录”，标题：“登录”，屏幕：“登录屏幕”，
键：“主页”，标题：“主页”，屏幕：“主屏幕”
],
invalidUserMenu：[
键：“InvalidFirst”，标题：“First”，屏幕：“InvalidFirst”，
键：“InvalidSecond”，标题：“Login”，屏幕：“InvalidSecond”，
],
伊斯洛金：错
};
}
componentDidMount=async（）=>{
//在此处检查用户是否登录
//例如，从存储
const user=await AsyncStorage.getItem（'user'）；
如果（用户）{
this.setState（{isLogin:true}）；
}
}
导航屏幕=（路线）=>{
const navigateAction=NavigationActions.navigate({
路由名称：路由
});
这个.props.navigation.dispatch（navigateAction）；
this.props.navigation.closeDrawer（）；
}
render（）{
返回(
{
this.state.isLogin？this.state.validUserMenu.map（（菜单）=>(
this.navigateToScreen（menu.screen）}>
{menu.title}
))：this.state.invalidUserMenu.map（（菜单）=>(
this.navigateToScreen（menu.screen）}>
{menu.title}
)) 
}
);
}
}
导出默认CustomDrawer；

然后您的

createDrawerNavigator

：

从“CustomDrawer\u路径”导入CustomDrawer
const AppStack=createDrawerNavigator({
入职：{屏幕：入职屏幕}
主页：{screen:HomeStack}，
配置文件：{screen:ProfileStack}，
设置：{screen:SettingsStack}，
登录：{screen:LoginScreen}，
仪表板：{屏幕：仪表板堆栈}，
顺序：{screen:OrderStack}，
ProductDetail:{屏幕：ProductDetailsScreen}，
组织列表：{screen:OrganizationListScreen}，
联系人列表：{screen:ContactListScreen}
}, {
contentComponent:CustomDrawer
});
const-AppContainer=createAppContainer（AppStack）；
导出默认AppContainer

createSwitchNavigator可能会帮助您。使用自定义抽屉导航器。@KishanBharda anyexample@Utpal我刚刚发布了答案。请检查一下，希望对您有所帮助。