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

1 回答

• 4

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

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

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

  希望能帮助到你

  回复于 2024-05-07T14:32:01+08:00