React Native导航控制器用法简介

React Native封装了许多控件，并且提供了比较详细的文档和代码片段，但并不是所有的示例都能够清楚的说明这些控件的用法，其中就包括重要的Navigator（导航控制器）。官方的文档中贴了许多代码，但并没有说清楚它是怎么工作的。

在iOS中，我们使用UINavigationController管理多个页面，每个被它所管理的页面都有一个引用指向所在的导航控制器对象。我们可以很方便的利用这个特性管理页面（push和pop）。不过React Native中的Navigator的使用方式不一样，它使用一个集中的路由机制控制页面的跳转，下面我们会通过一个简单的例子详细进行讲解。

1. 创建React Native项目

React Native可以用于现有的项目，为了简单起见，我们使用一个全新的项目开始。

$ react-native init NavigatorDemo
This will walk you through creating a new React Native project in ~/NavigatorDemo
Installing react-native package from npm...
Setting up new React Native app in ~/NavigatorDemo
NavigatorDemo@0.0.1 ~/NavigatorDemo
└── react@15.2.1 

To run your app on iOS:
   cd ~/NavigatorDemo
   react-native run-ios
   - or -
   Open ~/NavigatorDemo/ios/NavigatorDemo.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd ~/NavigatorDemo
   react-native run-android

react-native会自动创建一下项目内容：

$ ls
android index.android.js index.ios.js ios node_modules package.json

其中index.android.js和index.ios.js分别为Android和iOS应用的入口。为了能够更好地看清楚页面结构，我们新建一个js目录用于存放页面代码。

$ mkdir js
$ cd js
$ touch FirstScene.js
$ touch SecondScene.js
$ ls
FirstScene.js SecondScene.js

FirstScene.js和SecondScene.js为两个页面控件。

2. 准备工作

下面以index.ios.js为例进行讲解。默认该文件中有许多自动生成的代码，将其修改为以下样子。

//1. 导入react框架中的内容
import React, { Component } from 'react';
//2. 导入react-native框架中的内容
import {
  //3. 必须，注册应用（App）时使用
  AppRegistry, 
} from 'react-native';

//4. 创建应用
class NavigatorDemo extends Component {
  render() {
    return (
      //5. 编写应用的渲染代码
    );
  }
}

//5. 注册应用组件
AppRegistry.registerComponent('NavigatorDemo', () => NavigatorDemo);

可以看出React Native应用的结构还是很简单的。接下来就开始编写导航控制器相关内容。在使用之前需要导入一下组件：Navigator、View、Text、TouchableHighlight等。

import {
  AppRegistry,
  Text,
  View,
  Navigator,
  TouchableHighlight,
} from 'react-native';

导入刚才创建的页面组件：

import FirstScene from './js/FirstScene.js';
import SecondScene from './js/SecondScene.js';

接下来就可以使用这两个JS文件中的内容。

3. Navigator的使用

作为页面管理者，Navigator也是一个继承字Component的组件，需要最先渲染。

class NavigatorDemo extends Component {
  render() {
    return (
      //1. 使用导航控制器
      <Navigator
        //2. 设置初始页面
        initialRoute={{name: 'First'}}
        //3. 设置路由表
        renderScene={(route, navigator) => {
          //4. 更加名称路由
          switch (route.name) {
            case 'First':
              return (
                //4.1 渲染页面，并且传入导航控制器，方便页面内使用
                <FirstScene title={route.name} navigator={navigator}/>
              );
            case 'Second':
              return (
                <SecondScene title={route.name} navigator={navigator}/>
              );
          }
        }}
    />
   );
}

导航控制器有两个非常重要的属性initialRoute和renderScene，整个页面的管理就依靠这两个属性的设置。其中initialRoute用于设置初始页面（第一个页面）；而renderScene设置页面路由信息。

其中initialRoute的值就是页面路由时的第一个参数route对象，因此可以在里面设置任意需要在路由时使用的信息，其中最重要的是需要有一个能够区分页面的标识，这里我们使用name进行区分。

//2. 设置初始页面
initialRoute={{name: 'FirstScene'}}

renderScene是一个路由函数，导航控制器中的每个页面显示前都会调用该函数，从而根据传递的参数（route）获取对应的页面。

//3. 设置路由表
renderScene={(route, navigator) => {
  //4. 更加名称路由
  switch (route.name) {
    case 'First':
      return (
        //4.1 渲染页面，并且传入导航控制器(navigator)，方便页面内使用
        <FirstScene title={route.name} navigator={navigator}/>
      );
    case 'Second':
      return (
        <SecondScene title={route.name} navigator={navigator}/>
      );
  }
}}

4. 页面跳转

官方以及网络上的许多示例都是将所有代码写在index.ios.js中，在实际应用中几乎不存在这种情况。因此我们将页面组件分别写在两个不同的文件FirstScene.js和SecondScene.js中。其中第一个页面内容为：

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableHighlight,
} from 'react-native';

//1. 导出默认类，一定不能忘记export default导出
export default class FirstScene extends Component {

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <TouchableHighlight onPress={() => {
          //2. 使用props获取传入的navigator并使用route对象作为参数，跳转到新的页面
          this.props.navigator.push({name: 'Second'});
        }}>
          <Text>{this.props.title}</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

第二个页面的内容为：

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableHighlight,
} from 'react-native';

//1. 导出默认类
export default class SecondScene extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <TouchableHighlight onPress={() => {
          //2. 使用传入的导航控制器进行跳转，返回上一页
          this.props.navigator.pop();
        }}>
          <Text>{this.props.title}</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

很容易可以看出，其实每个页面也只是一个简单的组件，并不是什么特殊的东西。只不过很多人都被卡在了导航控制器（navigator）的获取上，因为React Native并不会像iOS一样自动将navigator传入页面。

注意：页面跳转时，不管是push还是pop都会先调用navigator的renderScene方法。

5. 参考资料

• https://facebook.github.io/react-native/docs/using-navigators.html

• https://rnplay.org/apps/HPy6UA