Android react native中的用户角色智能抽屉导航

我添加了react导航抽屉，用于在我的应用程序中实现抽屉导航。我创建了一个名为PrimaryNav.js的文件，并在其中添加了所有导航代码。

import Login from './components/Login';
import Employee from './pages/Employee';
import { createAppContainer,SafeAreaView, } from 'react-navigation'
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import React from 'react';

const Primary_Nav = createDrawerNavigator({
    Login: {
      screen: Login,
      navigationOptions: {
        drawerLabel: () => null
      }
    },
    Home_kitchen: {
      screen: Home_kitchen,
      navigationOptions: {
        drawerLabel: "Home"
      }
    },
    Employee: {
      screen: Employee,
      navigationOptions:{
        drawerLabel:"Employee",
      }
    },
  },{
    initialRouteName:'Login',
    drawerPosition: 'left',
    drawerType: "slide",
    }
});

const PrimaryNav = createAppContainer(Primary_Nav);
export default PrimaryNav;

类似上面的东西。我在

App.js

中调用了这个文件，我面临的问题是我需要根据用户的角色设置一个抽屉项目。因此，如果用户角色是出纳，他应该不能看到所有的菜单

---

所有页面都正确地进入抽屉菜单，但问题是我想如何在我的应用程序中管理菜单角色，并根据用户角色更改菜单？

您好，我看到了您的问题，我正在尝试帮助您。 我为抽屉部件做了定制设计。 -首先，您可以为抽屉设计创建一个额外的文件，如

DrawerComponent.js

并在创建抽屉导航器的代码中导入

import DrawerComponent from "./DrawerComponent";

const Primary_Nav = createDrawerNavigator(
{
 Login: {
  screen: Login,
  navigationOptions: {
    drawerLabel: () => null
  }
},
Home_kitchen: {
  screen: Home_kitchen,
  navigationOptions: {
    drawerLabel: "Home"
  }
},
Employee: {
  screen: Employee,
  navigationOptions: {
    drawerLabel: "Employee"
  }
}
},
{
  initialRouteName: "Login",
  drawerPosition: "left",
  drawerType: "slide",
  contentComponent: DrawerComponent // i added this DrawerComponent
}
);

const PrimaryNav = createAppContainer(Primary_Nav);
export default PrimaryNav;

现在在

DrawerComponent.js中

import React, { Component } from "react";
import { Text, View, TouchableOpacity } from "react-native";

export default class DrawerComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      role: 1 // i used 1 for cashier and 0 for chef
    };
  }

  render() {
    const { role } = this.state;
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, paddingVertical: 40, paddingHorizontal: 20 }}>
        <TouchableOpacity
          style={{ margin: 20 }}
          onPress={() => navigation.navigate("Home_kitchen")}
        >
          <Text>Home</Text>
        </TouchableOpacity>
        {role ? (
          <TouchableOpacity
            style={{ margin: 20 }}
            onPress={() => navigation.navigate("Employee")}
          >
            <Text>Employee</Text>
          </TouchableOpacity>
        ) : null}
      </View>
    );
  }
}

import React，{Component}来自“React”；
从“react native”导入{Text，View，TouchableOpacity}；
导出默认类抽屉组件扩展组件{
建造师（道具）{
超级（道具）；
此.state={
角色：1//我使用1作为出纳，0作为厨师
};
}
render（）{
const{role}=this.state；
const{navigation}=this.props；
返回(
导航。导航（“家庭厨房”）}
>
家
{角色(
导航。导航（“员工”）}
>
雇员
)：null}
);
}
}

如果要将角色更改为0，则“员工”选项卡在“抽屉导航器”中处于禁用状态，我让用户使用“三元运算符”获取条件。您可以根据需要修改is。希望它能对您有所帮助。
检查此项：我应该在上面的链接中参考哪个部分？我有点困惑，我想发送一个基于用户角色的抽屉菜单。嗨，谢谢你的回复。角色将动态地来自api调用。所以当我尝试登录时，我得到了用户的角色，并且基于该角色菜单应该出现。因此，第一次登录时，您的代码将无法工作，但在第一次登录后，我将以异步方式存储数据，然后在抽屉页面中获取数据，我可以根据角色给出条件，这样您的代码才能正常工作。否。未登录应用程序将无法打开。