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

【问题标题】：How to conditionaly change screen buttons in React Native bottom tab?如何有条件地更改 React Native 底部选项卡中的屏幕按钮？
【发布时间】：2021-02-06 22:31:50
【问题描述】：

我有一个带有按钮 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、stackoverflow、youtube 上进行了搜索，但没有找到满足此需求的解决方案。

我正在使用反应导航 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;
         }
       }     
     }
   }
/>

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

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

如果您没有时间解释解决方案，请至少给我一个代码示例或一篇文章或有关此用例的内容。

请帮助。

【问题讨论】：

标签： react-native react-navigation react-native-navigation react-navigation-v5 react-navigation-bottom-tab

【解决方案1】：

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

您可以在此处查看自定义标签栏的参考 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

【讨论】：

【解决方案2】：

建议为底部导航开发一个共享的公共组件（使用不同的参数来控制按钮的数量和去哪里）。并且您将底部导航放置在每个页面中。

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

【讨论】：