reactjs - 从嵌套的 StackNavigator 中隐藏 TabBar 的 react 导航屏幕

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路由和索引，{"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

第二，您尝试过:

Adding it to the screens inside the StackNavigator has no effect.

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

来自React Navigation documentation:

React Element or a function that given HeaderProps returns a React Element, to display as a header. Setting to null hides header

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

希望这有帮助!