Question

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

我想隐藏其中一个标签。我可以注释代码，它会消失，但是我仍然希望它在后台运行，但没有显示任何标签。有办法吗？

Answer 1

我使用React Navigation 5 API做到了！根据您的要求，其中一个选项卡将呈现并隐藏。

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

2-假设您要处理并隐藏第3个标签（即索引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，因此我无法为您提供任何帮助。

createBottomTabNavigator隐藏选项卡之一

1 个答案: