Question

我对反应导航有问题，在特定屏幕上隐藏了标签栏。

我有一个带有3个屏幕的底部标签导航器：

主屏幕
相机屏幕
后屏幕

我还有第二个（堆栈）导航器，带有两个屏幕：

主屏幕
相机屏幕

应该可以通过屏幕底部的选项卡从主屏幕导航到“相机屏幕”，但是我还需要屏幕顶部的一个按钮才能导航到“相机屏幕”。这就是为什么我创建堆栈导航器的原因。

我在Camerascreen.js上用于隐藏标签栏的代码（当我在底部的标签中导航时有效）：

CameraScreen.navigationOptions = NavigationData => ({
    header: null,
    tabBarVisible: false
});

出了什么问题？

问题在于，当我通过按钮（而不是底部选项卡）从主屏幕导航到“相机屏幕”时，底部选项卡没有隐藏在“相机屏幕”上。当我通过底部的选项卡从主屏幕导航到“摄像机”屏幕时，处于隐藏状态。当我通过堆栈导航器（而不仅是通过底部标签导航器）导航时，我还希望它们被隐藏。

我已经检查了以下问题：https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-tab-navigator-contains-a-stack-and-you-want-to-hide-the-tab-bar-on-specific-screens，但无法正常工作。

Answer 1

您可以使用此逻辑在特定屏幕上隐藏tabBar。

navigationOptions: ({navigation}) => {
        let tabBarVisible = true;
        if (navigation.state.routes.length > 1) {
          tabBarVisible = false;
        }
        return {
          tabBarVisible,
        };
      },

例如，在您的stackNavigater中

const HomeNavigation = createStackNavigator(
    {
      Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => {
          return {
            headerTitle: (
              <Header
                navigate={navigation.navigate}
              />
            ),
            headerStyle: {
              backgroundColor: '#d63921',
            },
            headerRight: (
              <HeaderRight
                navigate={navigation.navigate}
              />
            ),
          };
        },
      },
    },
    **{
      navigationOptions: ({navigation}) => {
        let tabBarVisible = true;
        if (navigation.state.routes.length > 1) {
          tabBarVisible = false;
        }
        return {
          tabBarVisible,
        };
      },**
      initialRouteName: 'Home',
      mode: 'card',
      lazy: false,
    },
  );

如有疑问，请随时

通过堆栈导航器导航时隐藏标签栏

1 个答案: