reactjs - react 导航显示/隐藏抽屉项目

Question

使用 React Navigation 进行 React Native - 显示/隐藏抽屉项目

我想知道你们或其他人是否想出了在 DrawerNavigator 下显示或隐藏某些菜单或抽屉项目的更好想法。

基本上我有用户角色，并且我想根据用户角色显示/隐藏所选菜单。

我现在的设置是，我有一个嵌套在 StackNavigator 中的 DrawerNavigator。

Menu That Contains My Drawer Items

Hide some drawer items based on user role

当前使用:

react 版本16.0.0-alpha.12

react native 版本0.46.0

react 导航版本1.0.0-beta.11

Answer 1

您可以创建自己的自定义组件来渲染抽屉项目

内容组件:CustomDrawerContentComponent

在该组件内，您可以定义显示隐藏项目的逻辑

示例:

const CustomItems = ({
  navigation: { state, navigate },
  items,
  activeItemKey,
  activeTintColor,
  activeBackgroundColor,
  inactiveTintColor,
  inactiveBackgroundColor,
  getLabel,
  renderIcon,
  onItemPress,
  style,
  labelStyle,
}: Props) => (
  <View style={[styles.container, style]}>
    {items.map((route: NavigationRoute, index: number) => {
      const focused = activeItemKey === route.key;
      const color = focused ? activeTintColor : inactiveTintColor;
      const backgroundColor = focused
        ? activeBackgroundColor
        : inactiveBackgroundColor;
      const scene = { route, index, focused, tintColor: color };
      const icon = renderIcon(scene);
      const label = getLabel(scene);
      return (
        <TouchableOpacity
          key={route.key}
          onPress={() => {
            console.log('pressed')
            onItemPress({ route, focused });
          }}
          delayPressIn={0}
        >
          <View style={[styles.item, { backgroundColor }]}>
            {icon ? (
              <View style={[styles.icon, focused ? null : styles.inactiveIcon]}>
                {icon}
              </View>
            ) : null}
            {typeof label === 'string' ? (
              <Text style={[styles.label, { color }, labelStyle]}>{label}</Text>
            ) : (
              label
            )}
          </View>
        </TouchableOpacity>
      );
    })}
  </View>
);

因此，在上面的代码中，您可以定义将显示哪条路线，例如您可以拥有显示或隐藏项目列表的商店，然后您可以在此处进行比较。

希望对你有帮助