Question

使用React导航反应原生 - 显示/隐藏抽屉物品

我想知道你们或者是否有人想出了一个更好的想法，即在DrawerNavigator下显示或隐藏一些菜单或抽屉物品。

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

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

Menu That Contains My Drawer Items

Hide some drawer items based on user role

目前正在使用：

反应版本16.0.0-alpha.12

react-native version 0.46.0

react-navigation version 1.0.0-beta.11

Answer 1

您可以创建自己的自定义组件，该组件将呈现抽屉项目

contentComponent：CustomDrawerContentComponent

在该组件中，您可以在show上定义逻辑隐藏您的项目

示例：

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>
);

因此，在上面的代码中，您可以定义将显示哪条路线，例如，您可以存储显示或隐藏的项目列表，并从此处进行比较。

希望有所帮助

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

1 个答案: