如何在 React Native Navigation V5 的标签栏中隐藏标签？

Question

IMG : What I want to hide

    return (
      <Tab.Navigator
        barStyle={{backgroundColor: '#F2F2F2'}}
        initialRouteName="Catalog">
        <Tab.Screen
          name="Settings"
          options={{
            tabBarLabel: 'Alterações',
            title: 'Configurações',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons name="cog" color="#000" size={22} />
            ),
          }}>
          {(props) => (
            <Settings
              {...props}
              params={{
                cpf: params.cpf ? params.cpf : cpf,
              }}
            />
          )}
        </Tab.Screen>

        <Tab.Screen
          name="Catalog"
          options={{
            tabBarVisible: false,
            title: 'Ofertas',
          }}>
          {(props) => (
            <Catalog
              {...props}
              params={{
                pracaId: params.pracaId ? params.pracaId : pracaId,
              }}
            />
          )}
        </Tab.Screen>
           [...]
      </Tab.Navigator>
    );

原谅我开了这个issue。但是我在谷歌上搜索了很多，但没有找到可以解决我的问题的解决方案。我只想每次都隐藏那个标签

Answer 1

您可以使用此选项 tabBarVisible 将选项卡隐藏在 Tabbar 中

<Tab.Screen
      name="Ofertas"
      options={{
        //.......
        tabBarVisible: false
}}>

Answer 2

好吧，我的解决方案是在内部工作 react-native-apper

/node_modules/react-native-paper/src/components/BottomNavigation.tsx

renderTouchable = (props: TouchableProps) => {
 if(props.route?.name !== "Catalog")
   return <Touchable {...props} />
}

我不知道这是否是个好习惯，但我需要它而且 react-navigation 维护者没有帮助我

如何在 React Native Navigation V5 的标签栏中隐藏标签？

How to hide a tab from the tabbar on React Native Navigation V5?

react-native

react-native-navigation