反应导航显示/隐藏抽屉项目

Question

使用React Navigation的React Native-显示/隐藏抽屉项

我想知道是你们还是某个人提出了在DrawerNavigator下显示或隐藏某些菜单或Drawer Item的更好的主意。

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

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

包含我的抽屉项目的菜单

根据用户角色隐藏一些抽屉项目

当前正在使用：

反应版本16.0.0-alpha.12

本机版本0.46.0

react-navigation版本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>
);

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

希望能帮助到你