Мудрая навигация по роли пользователя в 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, проблема, с которой я столкнулся, заключается в том, что мне нужно установить элемент ящика на основе роли, которую имеет пользователь. Поэтому, если роль пользователя — кассир, он не должен видеть все меню.

Все страницы отображаются правильно в меню ящика, но вопрос в том, как я хочу управлять ролью меню в своем приложении и изменять меню в зависимости от ролей пользователя?


ios react-native android navigation react-navigation-drawer
person Maq    schedule 27.12.2019    source источник
comment
Проверьте это: stackoverflow.com/questions/54587064/   -  person Karthik    schedule 27.12.2019
comment
На какой раздел я должен ссылаться в приведенной выше ссылке? Я немного запутался, я хочу отправить меню ящика на основе роли пользователя.   -  person Maq    schedule 27.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

привет, я видел вашу проблему, и я пытаюсь помочь вам. Я сделал индивидуальный дизайн для компонентов ящика. - во-первых, вы можете создать дополнительный файл для дизайна ящика, например 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. У меня есть пользователь тройной оператор для условий. вы можете изменить, как вы хотите. надеюсь, что это будет полезно для вас.

person shammi    schedule 28.12.2019
comment
Привет, спасибо за ваш ответ. Роль будет поступать динамически из вызова API. Поэтому, когда я пытаюсь войти в систему, я получаю роль пользователя, и на основе этой роли должно появиться меню. Итак, при первом входе в систему ваш код не будет работать, но после первого входа я буду хранить данные в асинхронном режиме, а затем получать данные на странице ящика, где я могу указать условие в зависимости от роли, после чего ваш код будет работать правильно. - person Maq; 30.12.2019
comment
Нет. Приложение не откроется без авторизации. - person Maq; 02.01.2020