React Navigation-介绍Navigators

Navigators(导航器)

Navigators允许您定义应用程序的导航结构。 Navigators还可以渲染通用元素，例如可以配置的标题栏和选项卡栏。
导航器是普通的React组件。

内建导航器

react-navigation 包含以下几个函数来帮助我们创导航：

• StackNavigator- 为app中的屏幕到堆栈最顶层转场提供了过度途径。
• TabNavigator- 用于设置具有多个选项卡的屏幕。
• DrawerNavigator- 用于设置抽屉导航屏幕。

使用Navigators渲染屏幕

导航器渲染仅仅是React组件的应用程序屏幕。
要了解如何创建屏幕，请阅读以下内容：

• Screen navigation 属性允许屏幕调度导航操作，例如打开另一个屏幕
• Screen navigationOptions 可以通过navigator自定义导航器显示屏幕的方式(例如标题标题，标签)

调用导航器顶层组件

如果你想从同一级别使用navigation，你可以使用react 的 ref 选项：

import { NavigationActions } from 'react-navigation';

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this.navigator && this.navigator.dispatch(
      NavigationActions.navigate({ routeName: someRouteName })
    );
  }
  render() {
    return (
       { this.navigator = nav; }} />
    );
  }
}

请注意，这个解决方案只能用在顶级导航器上。

导航容器

当导航属性丢失时，内置导航器可以自动表现为根导航器。该功能提供了一个透明的导航容器，这是顶级导航属性的来源。
当渲染其中一个导航器时，导航属性是可选的。当它丢失时，容器进入并管理其自己的导航状态。它还处理URL，外部链接和Android后退按钮集成。

为了方便起见，内置的导航器具有这种能力，因为幕后他们使用createNavigationContainer。通常，导航器需要导航属性才能起作用。

根导航器接受以下属性：

onNavigationStateChange(prevState, newState, action)

每次由导航器管理的导航状态发生变化，该函数都会被调用。它接收到以前的状态，新的导航状态和发生状态变化的动作。默认情况下会将状态更改打印到控制台。

uriPrefix

应用程序可能会处理的URI的前缀。这将在处理深层链接( deep link以提取路径传递到路由器时使用。