Navigator简介

处理应用程序中不同场景之间的转换。Navigator 是跨平台的导航组件，不管在 iOS 还是 Android 系统下都能使用。Navigator 默认没有包含导航栏，我们可以实现一个自定义导航栏，也可以使用 NavigatorBar 组件来实现。

Navigator安装

从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator，则需要先npm i facebookarchive/react-native-custom-components安装，然后从这个模块中import，即import { Navigator } from 'react-native-deprecated-custom-components'.

Navigator属性

1.configureScene：  PropTypes.func

configureScene函数应该返回一个场景配置对象用来定义页面切换的动画。可用场景配置选项为:

Navigator.SceneConfigs.PushFromRight(默认)

Navigator.SceneConfigs.FloatFromRight

Navigator.SceneConfigs.FloatFromLeft

Navigator.SceneConfigs.FloatFromBottom

Navigator.SceneConfigs.FloatFromBottomAndroid

Navigator.SceneConfigs.FadeAndroid

Navigator.SceneConfigs.SwipeFromLeft

Navigator.SceneConfigs.HorizontalSwipeJump

Navigator.SceneConfigs.HorizontalSwipeJumpFromRight

Navigator.SceneConfigs.HorizontalSwipeJumpFromLeft

Navigator.SceneConfigs.VerticalUpSwipeJump

Navigator.SceneConfigs.VerticalDownSwipeJump

2. renderScene: PropTypes.func.isRequired

renderScene函数为给定路由呈现场景所需的功能，参数route、 navigator，返回一个指定的组件。如下所示：

(route, navigator) =><MySceneComponen ttitle={route.title} navigator={navigator} />

3.initialRoute: PropTypes.object

initialRoute设置默认的路由。路由是导航器用来识别其呈现的每个场景的对象。如果Navigator同时initialRoute和initialRouteStack，那么initialRoute必须在initialRouteStack中。如果只有initialRouteStack被设置，那么initialRoute将在initialRouteStack中默认为内部的最后一项。

4.initialRouteStack: PropTypes.arrayOf(PropTypes.object)

通过initialRouteStack来设置一组路由。如果Navigator没有initialRoute，则需要initialRouteStack属性。如果设置initialRouteStack，它将默认为只包含initialRoute的数组。

5.onWillFocus: PropTypes.func

每个navigator组件转换之前，会回调onWillFocus函数。

6.onDidFocus: PropTypes.func

每个navigator组件转换之后，会回调onDidFocus函数。

7.navigationBar: PropTypes.node

使用此功能提供一个可选组件，该组件表示在场景转换中持久存在的导航条。这个组件将接收两个属性:navigator和navState，表示导航器组件和它的状态。该组件在路由更改时重新呈现。

8.navigator: PropTypes.object

设置navigator属性，可以传递给子组件。

9.sceneStyle: ViewPropTypes.style

每个场景的容器的样式。

Navigator实例

1.您可以提供一个或多个称为路由的对象，识别每一个场景。您还提供renderScene函数为每个路由对象渲染场景。initialRoute用于指定第一个路由，它包含标识路由的title属性。renderScene属性返回一个显示基于路由标题的文本的函数。如下所示：

2.要设置多个场景，您可以通过initialRouteStack设置Navigator。如下所示：

3.需要返回按钮时，可以选择通过NavigationBar定义。Navigator.NavigationBar组NavigationBar里的属性。您可以通过routeMapper设置左按钮、右按钮和标题。如下所示：

4.在为导航栏配置左按钮、右南牛和标题项时，您可以通过当前路由对象和导航状态自定义每个场景的标题和按钮。比如你想隐藏左边的返回按钮，如下所示：

5.你可以设置configureScene来自定义页面切换时的动画，如下所示：