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

时间:2020-11-02 01:05:22

标签: react-native react-native-navigation

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>
    );

请原谅我打开此问题。但是我在Google上搜索了很多,却没有找到可以解决我的问题的解决方案。 我只想每次都隐藏该标签

2 个答案:

答案 0 :(得分:0)

您可以使用此选项tabBarVisible隐藏标签栏内的标签

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

答案 1 :(得分:0)

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

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

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

我不知道这是否是一个好习惯,但是我需要它,而反应导航维护者也帮不了我