《React Native移动开发实战》一一3.6 添加页面跳转功能—

3.6 添加页面跳转功能——Navigator组件
React Native实现页面跳转的组件有Navigator以及NavigatorIOS，和前面介绍过的ViewPagerAndroid问题一样，为了考虑平台兼容性和代码复用性，这里使用同时支持iOS和Android的Navigator组件。
在正式使用Navigator之前，首先需要对现有的ch04项目做一些简单的重构：将首页的实现移植到新建的home.js文件中，以便后面的逻辑改动。
（1）新建home.js文件，将app.js的内容全部复制至home.js文件中。同时，不要忘记修改home.js文件中组件的名称。修改home.js代码如下：

01 export default class home extends Component { // 将组件名称从"app"修改成"home"

（2）修改app.js文件的代码如下：

01 import React, {Component} from 'react';
02 import {View, Navigator} from 'react-native';
03
04 import Home from './home';
05
06 export default class app extends React.Component {
07 render() {
08 return (
09 10 initialRoute={{
11 name: 'home',
12 component: Home
13 }}
14 configureScene={(route) => {
15 return Navigator.SceneConfigs.FloatFromRight;
16 }}
17 renderScene={(route, navigator) => {
18 const Component = route.component;
19 return
20 }}/>
21 );
22 }
23 }

重新加载应用，保证运行效果和重构前完全一致，如图3.26所示。

图3.26 代码重构后的运行效果
对于上述代码，读者可能会有很多疑惑，这里来一一说明。
Navigator组件的initialRoute属性定义了应用启动时加载的路由（route），而路由是Navigator组件用来识别渲染场景的一个对象，简单来说，initialRoute中定义的组件就是应用第一个要显示的页面，这就是首页home.js。
Navigator组件的configureScene属性定义了页面之间跳转的动画，除了代码中的Navigator.SceneConfigs.FloatFromRight;外，还有很多React Native已经为我们定义好的动画，包括：
? FloatFromRight；
? FloatFromLeft；
? FloatFromBottom；
? FloatFromBottomAndroid；
? FadeAndroid；
? HorizontalSwipeJump；
? HorizontalSwipeJumpFromRight；
? VerticalUpSwipeJump；
? VerticalDownSwipeJump。
?提示：动画效果也考虑到了平台差异性，这点可以从动画命名可以看出，例如只支持Android的动画有FloatFromBottomAndroid以及FadeAndroid等。
?注意：由于动画效果暂时无法在书中呈现给读者，所以读者感兴趣的话，可以自己动手运行应用体验不同的动画效果。
Navigator组件的renderScene()函数应该是最容易令人困惑的地方了，为此，可以使用React Native调试来一看究竟。在该函数中添加断点并重新运行应用，效果如图3.27所示。

图3.27 使用调试断点来查看renderScene运行机制
这里需要重点关注的是右侧调试区域的变量值，如图3.28所示。

图3.28 renderScene参数的值
从图3.28中的name可以看出，此时的route里的name和component就是在initialRoute属性中传递的home和home组件，所以app.js文件中这行代码：

01 return

的作用就是返回home组件。当然，这里不仅返回了home组件，还将路由（route）的参数以及navigator参数也传递给了home组件：通过{...route.params}以及navigator= {navigator}，于是，在home组件中就可以使用this.props.navigator来获取navigator。