时间戳

首页 > 解决方案 > createBottomTabNavigator 隐藏选项卡之一

react-native - createBottomTabNavigator 隐藏选项卡之一

问题描述

export default createBottomTabNavigator(
  {
    Overview: {
      screen: OverviewStack,
    },
    Activities: {
      screen: ActivityStack,
      navigationOptions: {
        title: 'Activity',
      },
    },
    Workout: {
      screen: WorkoutStack,
      navigationOptions: {
        title: 'Workout',
      },
    },
....
.....

我想隐藏其中一个选项卡。我可以评论代码，它会消失，但我仍然希望它在后台运行，但不显示任何选项卡。有办法吗？

标签： react-native

解决方案

我使用 React Navigation 5 API 做到了！根据您的要求，其中一个选项卡被渲染和隐藏。

1 - 使用tabBar参数的示例： https ://reactnavigation.org/docs/bottom-tab-navigator#tabbar

2 - 假设您想要处理并隐藏第三个选项卡（即索引 2 处的选项卡），对示例进行以下修改：

@@ -47,7 +47,8 @@ function MyTabBar({ state, descriptors, navigation }) {
         testID={options.tabBarTestID}
         onPress={onPress}
         onLongPress={onLongPress}
-            style={{ flex: 1 }}
+            style={{ flex: 1, display: index === 2 ? "none" : "flex" }}
       >
         <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
           {label}

重要提示：使用 React Navigation 4 API，它必须以几乎相同的方式使用 tabBarComponent属性而不是tabBar属性。

不幸的是，npmjs.com 上不再提供 v4，因此我无法为您提供更多帮助。

推荐阅读