如何根据数据库用户权限在本机反应中从抽屉导航中隐藏菜单？

Question

我正在尝试使用 expo 制作一个反应原生的项目。 我有一个用于登录的切换导航。 登录后，我有一个包含单独堆栈导航的抽屉导航。 对于每个屏幕，我想根据用户权限隐藏抽屉导航中的几个菜单，因为该应用程序将由管理员、员工、经理等使用。

或者有没有其他方法可以根据我的要求创建动态抽屉导航，并根据用户权限从数据库中获取菜单？

登录后应根据用户类型呈现抽屉导航。

这是我的抽屉导航代码片段：

const DrawerNav = createDrawerNavigator({
  HomeScreen: {
    screen: createStackNavigator({
      HomeScreen: {
        screen: HomeScreen,
        navigationOptions: ({ navigation }) => {
          return {
            title: "Dashboard",
            headerLeft: (
              <Ionicons
                name="md-menu"
                size={32}
                color="white"
                style={{ paddingLeft: 20 }}
                onPress={() => navigation.toggleDrawer()}
              />
            ),
            headerStyle: {
              backgroundColor: "#B00020"
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "bold"
            }
          };
        }
      }
    }),
    navigationOptions: ({ navigation }) => ({
      drawerLabel: "Dashboard",
      drawerIcon: () => <Ionicons name="md-home" size={28} color="#B00020" />
    })
  },
  UserlistDetails: {
    name: UserlistDetails,
    screen: createStackNavigator({
      UserlistDetails: {
        screen: UserlistDetails,
        navigationOptions: ({ navigation }) => {
          return {
            title: "User Accnt Details",
            headerLeft: (
              <Ionicons
                name="md-menu"
                size={32}
                color="white"
                style={{ paddingLeft: 20 }}
                onPress={() => navigation.toggleDrawer()}
              />
            ),
            headerStyle: {
              backgroundColor: "#B00020"
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "bold"
            }
          };
        }
      },
      CreateNewUser: {
        screen: CreateNewUser,
        navigationOptions: ({ navigation }) => {
          return {
            title: "Create New User",
            headerStyle: { backgroundColor: "#B00020" },
            headerTintColor: "#fff",
            headerTitleStyle: { fontWeight: "bold" }
          };
        }
      }
    }),
    navigationOptions: ({ navigation }) => ({
      drawerLabel: "User Accnt Details",
      drawerIcon: () => <Ionicons name="md-person" size={28} color="#B00020" />
    })
  }
});

const StackNav = createStackNavigator(
  { Dashboard: DrawerNav },
  {
    defaultNavigationOptions: ({ navigation }) => {
      return { header: null };
    }
  }
);

const Navigation = createAppContainer(StackNav);

export default class Home extends React.Component {
  static navigationOptions = { header: null };
  render() {
    return (
      <View style={styles.container}>
        <Navigation />
      </View>
    );
  }
}

Answer 1

如果您查看反应导航文档，它会指出一个限制是缺乏动态路线的能力。 所有路由都必须是 static 并在开头定义。 在此处查看更多信息： https://reactnavigation.org/docs/en/limitations.html#targetText=Dynamic%20routes&targetText=React%20Navigation%20does%20not%20currently,can%20do%20this%20using%20params 。