Question

我正在使用React Native和React Native Navigation构建我的应用程序。目前，我有三个底部标签：“主页”，“上传视频”和“消息”。选择“上传视频”选项卡后，我要渲染“上传视频”组件并在该屏幕上隐藏底部的选项卡，并显示带有“取消”（将其带回到HomeView）和“发布”按钮（带有已经完成）。在这个特定屏幕上隐藏选项卡栏时，我遇到了非常困难的时光。

我尝试遵循此处的代码（How can I hide the bottom tab bar on a specific screen (react-navigation 3.x)）；但是，最终结果不成功，我无法以这种方式隐藏任何屏幕的底部选项卡。

当前，我将其作为底部导航器：

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

任何见解都会非常有帮助，谢谢。

Answer 1

您需要为每个要隐藏其标签栏的 TabBar 屏幕或堆栈指定

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
        navigationOptions:()=>{
          return {
            tabBarVisible:false,
          };
       }
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

Answer 2

由于现在正在使用react-navigation 5，因此上述解决方案不再起作用。

对于React-Navigation 5，请参阅this link。

Answer 3

在v5上，您可以使用函数和默认的arg导航来修改选项。

<BottomTab.Screen
      name="Explore"
      component={Explore}
      options={({ navigation }) => {
        const { routes, index } = navigation.dangerouslyGetState();
        const { state: exploreState } = routes[index];
        let tabBarVisible = true;
        if (exploreState) {
          const { routes: exploreRoutes, index: exploreIndex } = exploreState;
          const exploreActiveRoute = exploreRoutes[exploreIndex];
          if (exploreActiveRoute.name === "RewardDetail") tabBarVisible = false;
        }
        return {
          tabBarVisible,
          title: "Explore",
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="search1" color={color} size={size} />
          ),
        };
      }}
    />

查看我的答案：https://stackoverflow.com/a/64042879/5288560

如何在React Native中隐藏特定屏幕上的底部导航栏？

3 个答案: