Question

我是react-navigation的新手，并试图绕过如何执行以下操作：

鉴于此导航结构：

RootTabNavigator 

  LoggedOut_StackNavigator

    ...

  LoggedIn_StackNavigator

    LoggedIn_TabNavigator <-- TabBar rendered by this Navigator

      TabA_StackNavigator

        ScreenA
        ScreenB

我希望能够使用典型的“从右侧滑入”转换，从ScreenA导航到ScreenB，以TabBar 为< / strong> ScreenA上可见，但ScreenB上可见。换句话说，当我导航到ScreenB时，我希望它占据整个窗口。

用户从ScreenA转换为ScreenB后，可以按后退按钮返回ScreenA，或使用与{TabBar相同的转换导航到新路线1}}仍然不可见。

我尝试了什么：

navigationOptions.tabBarVisible：此属性在应用于TabA_StackNavigator时本身似乎无效，这意味着其堆栈中的所有屏幕也隐藏了{{ 1}}。将其添加到StackNavigator内的屏幕无效。

添加新的TabBar作为AllScreens_StackNavigator的兄弟并导航到此导航器中的路由，我收到错误：LoggedIn_TabNavigator。我发送的导航操作试图执行此操作：

Expect nav state to have routes and index, {"routeName":"ScreenB", "params": {}, "key": "init-id-1516..."}

非常感谢任何帮助！

Answer 1

编辑：此答案与getColor v1相关.~（pre v2.0）

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

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

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

解决方案

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

navigationOptions

说明

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

第二，你试过了：

将其添加到StackNavigator内的屏幕无效。

它没有用，因为隐藏StackNavigator的标题需要将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) }字段设置为header。

来自React Navigation documentation:

React Element或给定HeaderProps返回React的函数元素，显示为标题。 设置为空隐藏标题

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

希望这有帮助！

Answer 2

以下是最终为我工作的内容，所以我发布了希望它可以帮助他人。我还没有机会尝试@talzaj的实施，所以我会把它留给其他人来支持那些对他们最有效的东西。以下解决方案对我来说效果很好，包括嵌套导航器内部。

我更新了导航结构，以便：

LoggedIn_StackNavigator仍然有LoggedIn_TabNavigator作为其中一个屏幕，而LoggedIn_TabNavigator是使用LoggedIn_StackNavigator设置的initialRouteName的初始路线。
LoggedIn_StackNavigator还包含每个屏幕的路线，该屏幕需要全屏显示并隐藏标签栏。（如果您正在重新使用屏幕，其中一些显示标签栏可见而其他屏幕不可见，确保使用唯一键用于重复使用同一屏幕的路线。

导航结构

因此，导航结构如下：

RootTabNavigator 

  LoggedOut_StackNavigator

  LoggedIn_StackNavigator

    ScreenA // ( reuse screen component, different route key )

    ScreenB // ( reuse screen component, different route key )

    LoggedIn_TabNavigator <-- TabBar rendered by this Navigator

      TabA_StackNavigator

        ScreenA
        ScreenB

`LoggedIn_StackNavigator`

LoggedIn_StackNavigator看起来像：

import { StackNavigator } from 'react-navigation';
import LoggedIn_TabNavigator from './LoggedIn_TabNavigator';
import { 
  ScreenA, 
  ScreenB, 
} from './LoggedIn_TabNavigator/TabA_StackNavigator/Screens';

const LoggedIn_StackNavigator = StackNavigator({
  WithoutTabBar_ScreenA: {
     screen: ScreenA
  },
  WithoutTabBar_ScreenB: {
    screen: ScreenB
  },
  LoggedIn_TabNavigator: {
    screen: LoggedIn_TabNavigator
  }
}, {
  initialRouteName: 'LoggedIn_TabNavigator'
});

export default LoggedIn_StackNavigator;

从那里，我写了一个帮助HOC来推送全屏路线：

import React from 'react';
import { withNavigation } from 'react-navigation';
import { fullScreenRoutePrefix } from './somewhere';

export default function withNavigateFullScreen(Child) {

  @withNavigation
  class WithNavigateFullScreenHOC extends React.Component {

    navigateToFullScreenRoute = (routeName, params) => {          
      this.props.navigation.navigate(
        `${fullScreenRoutePrefix}${routeName}`, params
      );
    }

    render() {
      return (
        <Child 
          {...this.props} 
          navigateFullScreen={this.navigateToFullScreenRoute} 
        />
      );
    }
  }
  return WithNavigateFullScreenHOC;
}

然后我可以导航到全屏路线，如下：

import React from 'react';
import { withNavigateFullScreen } from 'components/higher-order';
import { Text } from 'react-native';

@withNavigateFullScreen
export default class ScreenA extends React.Component {
  goToScreenB = () => {
    this.props.navigateFullScreen('ScreenB');
  }
  render() {
    return <Text onPress={this.goToScreenB}>Go To Screen B</Text>;
  }
}

react-navigation屏幕从嵌套的StackNavigator

2 个答案:

解决方案

说明

导航结构

`LoggedIn_StackNavigator`