反应导航 tabBarVisible：false 不适用于 TabNavigator 内的 StackNavigator

Question

我完全困惑于实现如下所示，这工作正常但无法隐藏 EditPage 和 PageTwo 的标签栏

• 登录
• 注册
• 标签导航器(TabNavigator)
  • 第一个标签
  • 第二个选项卡（堆栈导航器）
    • 列表页
    • 编辑页面
  • 第三个选项卡（堆栈导航器）
    • PageOne
    • 第二页
  • 设置

下面是我的配置。

import { createStackNavigator, createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
//Other required imports here

const SignedOut = createStackNavigator({
  Signup: { screen : Signup},
  Login: { screen : Login}
});

const SignedIn = createBottomTabNavigator({
    Dashboard: {
      screen: Dashboard
    },
    Rewards: {
      screen: createStackNavigator({
        Rewards:{
          screen: Rewards,
          navigationOptions:{
            header:null
          }
        },
        AddReward:{
          screen: AddReward,
          navigationOptions:{
            header:null,
            tabBarVisible: false
          }
        }
      })
    },
    Activities: {
      screen: createStackNavigator({
        Rewards:{
          screen: Activities,
          navigationOptions:{
            header:null
          }
        },
        NewActivity:{
          screen: NewActivity,
          navigationOptions:{
            header:null,
            tabBarVisible: false
          }
        }
      })
    },
    Settings: {
      screen: Settings
    }
},{
  tabBarComponent: ({navigation}) => <FooterComponent navigation={navigation} />,
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false
});

export const createRootNavigator = (signedIn) => {
    return createSwitchNavigator(
        {
            SignedIn: {
                screen: SignedIn
            },
            SignedOut: {
                screen: SignedOut
            }
        },
        {
            initialRouteName: (signedIn) ? "SignedIn" :"SignedOut",
            headerMode: 'none'
        }
    );
};

问题

• 我无法隐藏 AddReward 和 NewActivity 的标签栏
• tabBarVisible: false 不适用于 TabNavigator 中的 StackNavigator

谢谢

Answer 1

您可以将一个 StackNavigator 与所有堆栈一起使用，并将 TabNavigator 设置为默认路由：

• 开关导航器
  • 登录
  • 注册
  • 堆栈导航器
    • 标签导航器
      • 第一个标签
      • 列表页
      • 设置
    • 编辑页面
    • 第二页

Answer 2

问题是您的屏幕（奖励和 AddRewards 在堆栈导航器中）

旧：

 Rewards: {
          screen: createStackNavigator({
            Rewards:{
              screen: Rewards,
              navigationOptions:{
                header:null
              }
            },
            AddReward:{
              screen: AddReward,
              navigationOptions:{
                header:null,
                tabBarVisible: false
              }
            }
          })
        }

修复：

    Rewards: {
          screen: createStackNavigator({
            Rewards,
            AddReward,
          }),
          navigationOptions:{
            header:null,
            tabBarVisible: false
          }
        }

Answer 3

更多细节可以在官方文档中找到，Tested working with v 3.0.9：

A tab navigator contains a stack and you want to hide the tab bar on specific screens

修改代码来自：

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  Details: DetailsScreen,
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: TabNavigator,
});

收件人：

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  /* any other route you want to render under the tab bar */
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const HomeStack = createStackNavigator({
  Tabs: TabNavigator,
  Details: DetailsScreen,
  /* any other route you want to render above the tab bar */
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: HomeStack,
});

此外，在此示例中，FeedScreen 将有两个标题：一个来自 FeedStack，另一个来自 HomeStack。为了解决这个问题，一种解决方案是将 HomeStack 的默认标题高度设置为 0，并在 DetailsS​​creen 中覆盖高度。下面是一个例子：

const HomeStack = createStackNavigator(
  {
    Tabs: TabNavigator,
    Details: DetailsScreen,
    /* any other route you want to render above the tab bar */
  },
  {
    initialRouteName: 'Tabs',
    defaultNavigationOptions: {
      headerStyle: { height: 0, },
      headerForceInset: { top: 'never', bottom: 'never' },
    },
  },
);

另一种解决方案是：

A stack contains a tab navigator and you want to set the title on the stack header

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileStack,
});

TabNavigator.navigationOptions = {
  // Hide the header from AppNavigator stack
  header: null,
};

嗯，对我来说，这些解决方案有点棘手。 无论如何，它有效。

Answer 4

React Navigation v5：

https://www.youtube.com/watch?v=sH6OqX6ANeE

这解决了我的问题。

Answer 5

在 Tab.Screen 选项中，只需使用 tabBarStyle: {display: none}。

例如：

<Tab.Screen name="About Screen" component={TabAboutScreen} 
       options={{
                tabBarLabel:"About",
                tabBarStyle: { display: 'none' },
            
        }}    
/>