如何有条件地更改 React Native 底部选项卡中的屏幕按钮？

Question

我有一个带有按钮 A、B、C、D、E 的底部标签。

当我在屏幕上时 A 我希望选项卡显示 B,C,D,E 按钮而不是按钮 A .
当我在屏幕上时 B 我希望选项卡显示 A,C,D,E 按钮而不是按钮 B .
当我在其他屏幕上时，我想显示 A、C、D、E 按钮或 B、C、D、E（取决于我选择 A 或 B）。

我在 google、Whosebug、youtube 上都进行了搜索，但没有找到满足此需求的解决方案。

我正在使用 React 导航 v5.

我试过很多方法，像这样：

<Tab.Screen name="A" component={A}
   options={
     ()=>{
       tabBarButton:(props)=>{
         if(isScreen("A")){
            return null;
         }else{
            return <TouchableOpacity {...props}/>
         }
       }     
     }
   }
/>

<Tab.Screen name="B" component={B}
   options={
     ()=>{
       tabBarButton:(props)=>{
         if(isScreen("A")){
            return <TouchableOpacity {...props}/>
         }else{
            return null;
         }
       }     
     }
   }
/>

但这给了我不正确的行为，即使它没有出错！！

如果你们不明白这个问题，请告诉我，我会让问题更具体。

如果你没有时间解释解决方案，至少给我一个代码示例或一篇文章或关于这个用例的东西。

PLZ 帮助。

Answer 1

建议为底部导航开发一个共享的公共组件（使用不同的参数来控制按钮的数量和去向）。然后你把底部导航放在每个页面里。

这种情况下，每个页面都有自己定制的导航底部显示。

Answer 2

您必须为此创建自定义标签栏并有条件地显示标签。

您可以在此处查看自定义标签栏的参考 https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar

您必须创建如下所示的内容（我已经修改了文档中的示例代码）

function MyTabBar({ state, descriptors, navigation }) {

  //Condition to decide the tab or not
  const shouldDisplay = (label, isFocused) => {
    if (label === 'A' && isFocused) return false;
    else if (label === 'B' && isFocused) return false;
    else return true;
  };

  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        if (!shouldDisplay(label, isFocused)) return null;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}>
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

您可以在下面的小吃中看到代码 https://snack.expo.io/@guruparan/customtabs

如何有条件地更改 React Native 底部选项卡中的屏幕按钮？

How to conditionaly change screen buttons in React Native bottom tab?

react-native

react-navigation

react-native-navigation

react-navigation-v5

react-navigation-bottom-tab