使用时如何从底部标签栏隐藏“SPECIFIC TAB BAR ITEM”：@react-navigation/bottom-tabs

Question

这是一个视频，展示了我所有可见的当前底部选项卡项目：主页、我的帐户、购物车和菜单。 https://streamable.com/no6anz

我还有其他底部选项卡项要在屏幕上呈现，但在底部选项卡栏本身中不可见。（例如：SettingsView）

我如何使用 React Native Navigation v5 实现此目的？

Answer 1

在您不想显示的元素 (Tab.Screen) 上，渲染一个 null tabBarButton 。

<Tab.Screen
    name="SignIn"
    component={SignInScreen}
    options={{
      tabBarButton: (props) => null, //like this
      tabBarStyle: { display: 'none' }, //this is additional if you want to hide the whole bottom tab from the screen version 6.x
    }}
  />

Answer 2

我已经解决了我自己的问题：

<Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#161718',
    inactiveTintColor: '#ffffff',
    style: {
      backgroundColor: '#161718',
      paddingTop: 10,
      borderTopColor: '#161718',
    },
    labelStyle: {
      textAlign: 'center',
      top: 8,
    },
  }}
  screenOptions={({route}) => ({
    tabBarButton: ['Contact', 'Route2ToExclude'].includes(route.name)
      ? () => {
          return null;
        }
      : undefined,
  })}>

如您所见，我正在使用 screenoptions 来定义要从底部选项卡栏中排除的路由。 请注意，这些路由确实需要是 <tab.navigator> 组件中的实际屏幕。

Answer 3

React Navigation Bottom Tab Navigation github 问题链接

https://github.com/react-navigation/react-navigation/issues/5230#issuecomment-595846400