React-navigation 官方文档中文翻译(四) intro to Navigators

版本号: 1.0.0-beta.12

Navigators

导航器允许您定义应用程序的导航结构。导航器还渲染可以配置的   常见元素，如标题栏和制表符栏。在引擎盖下，导航仪是简单的反应组件。

Built-in Navigators

react-navigation 包括以下功能来帮助您创建导航器：

• StackNavigator - 一次渲染一个屏幕，并提供屏幕之间的转换。当新屏幕打开时，它被放置在堆栈的顶部。
• TabNavigator - 呈现一个标签栏，让用户在多个屏幕之间切换
• DrawerNavigator - 提供从屏幕左侧滑入的抽屉

Rendering screens with Navigators(渲染屏幕与Navigators)

要了解如何创建屏幕，请阅读：

• 屏幕支架navigation允许屏幕调度导航操作，如打开另一个屏幕
• 屏幕navigationOptions来自定义导航器如何显示屏幕（例如标题，标签）

Calling Navigate on Top Level Component(调用顶级导航栏)

如果您想使用同一级别的Navigator，您可以声明它，您可以使用react的ref选项：

const AppNavigator = StackNavigator(SomeAppRouteConfigs);class App extends React.Component {  someEvent() {    // call navigate for AppNavigator here:    this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });  }  render() {    return (      <AppNavigator ref={nav => { this.navigator = nav; }} />    );  }}

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

Navigation Containers(导航容器)

当导航prop丢失时，内置导航器可以自动表现为顶级导航器。该功能提供了一个透明的导航容器，这是顶级导航prop来自哪里。当渲染其中一个导航器时，导航支路是可选的。当它丢失时，容器进入并管理其自己的导航状态。它还处理URL，外部链接和Android后退按钮集成。为了方便起见，内置导航仪具有这样的功能，因为它们使用的幕后。通常，导航员需要导航prop才能起作用。createNavigationContainer顶级导航器接受以下道具：onNavigationStateChange(prevState, newState, action) 导航器管理的导航状态每当被调用的功能发生变化。它接收到以前的状态，新的导航状态和发出状态的动作发生变化。默认情况下会将状态更改打印到控制台。uriPrefix 应用程序可能处理的URI的前缀。这将在处理深层链接以提取传递到路由器的路径时使用。