react-navigation从嵌套的StackNavigator隐藏TabBar的屏幕

Question

我是新手,react-navigation并试图围绕如何做以下事情:

鉴于此导航结构:

RootTabNavigator 

  LoggedOut_StackNavigator

    ...

  LoggedIn_StackNavigator

    LoggedIn_TabNavigator <-- TabBar rendered by this Navigator

      TabA_StackNavigator

        ScreenA
        ScreenB

我希望能够从导航ScreenA到ScreenB"从右幻灯片"过渡使用典型的,在这样一种方式,TabBar 是可见的ScreenA,但不可见ScreenB.换句话说,当我导航到时ScreenB,我希望它占据整个窗口.

一旦用户转换ScreenA为ScreenB,他们可以按后退按钮返回ScreenA,或使用TabBar仍然不可见的相同转换导航到新路线.

我尝试过的:

• navigationOptions.tabBarVisible:这个属性似乎只适用于TabA_StackNavigator自身,这意味着它的堆栈中的所有屏幕也隐藏了TabBar.将其添加到StackNavigator内的屏幕无效.

• 添加一个新AllScreens_StackNavigator的兄弟LoggedIn_TabNavigator并导航到此导航器中的路径,我收到错误:Expect nav state to have routes and index, {"routeName":"ScreenB", "params": {}, "key": "init-id-1516..."}.我调度的导航操作试图这样做:

  {
    "action": Object {
      "params": Object {},
      "routeName": "ScreenB",
      "type": "Navigation/NAVIGATE",
    },
    "params": Object {},
    "routeName": "AllScreens_StackNavigator",
    "type": "Navigation/NAVIGATE",
  }
  

任何帮助是极大的赞赏!

Answer 1

react-nagivation编辑：这个答案与v1.~（v2.0 之前）相关

根据评论中的建议，请参阅此问题：

https://github.com/react-navigation/react-navigation-tabs/issues/19

显然，navigationOptions内部组件的 也会影响包含导航器的父导航器。

解决方案

这意味着这段代码应该适合您：

class ScreenB extends React.Component {
  static navigationOptions = {
    header: () => null,  //this will hide the Stack navigator's header (TabA_StackNavigator)
    tabBarVisible: false //this will hide the TabBar navigator's header (LoggedIn_TabNavigator)
  }

解释

首先，您可以设置每个屏幕（组件）的导航选项。您可以在上面或此处的代码片段中查看如何操作：React Navigation - Screen Navigation Options

其次，您尝试过：

将其添加到 StackNavigator 内的屏幕没有任何效果。

它不起作用，因为隐藏 StackNavigator 的标头需要将该header字段设置为null。

来自React 导航文档：

React Element 或给定 HeaderProps 的函数返回一个 React Element，以显示为标题。设置为 null 隐藏标题

第三，使用tabBarVisible实际上是正确的，但它只影响 TabNavigator。为了使其仅对一个选项卡而不是对所有选项卡消失，您需要在特定屏幕上进行设置。ScreenB在你的情况下。

希望这可以帮助！