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

Fitim Zenuni 发表于常见问题

Fitim Zenuni

我有一个带有按钮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上进行了搜索，但没有找到解决此问题的方法。

我正在使用React Navigation 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帮助。

古拉帕兰（Guruparan Giritharan）

您将为此创建一个自定义选项卡栏，并有条件地显示标签。

您可以在以下网址查看自定义标签栏的参考：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>
  );
}