android - react-native 中的用户角色明智的抽屉导航
问题描述
我添加了react-navigation-drawer用于在我的应用程序中实现抽屉导航。我创建了一个名为 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>
);
}
}
如果您将角色更改为 0,则在Drawer Navigator中禁用 Employee 选项卡我让用户使用三元运算符作为条件。您可以根据需要进行修改。希望对您有所帮助。
推荐阅读
- variables - 如何覆盖 Dart/flutter 上的变量
- java - 我在获取 firebase 图像的 url 时遇到问题
- java - Cookie cookie[]= req.getCookies() 行的编译错误“类型不匹配”;
- authentication - 有没有办法通过终端验证google API的OAUTH2.0?
- python - Conv2DSlowBackpropInput:输入深度必须能被过滤器深度整除
- mongodb - Springboot 使用 find*() 查询时出现 Mongodb 错误
- javascript - 将力树约束到不规则边界 d3
- reactjs - Recharts 导入失败
- excel - 如果没有单元格缺失值,如何删除一行数据?
- javascript - 能够从网站上的 div 播放各种声音文件