场景（Scene）

到目前为止，我们都是创建的单页面的应用，接下来我们要学习如何创建多页面的应用。通俗来说，一个完整的界面我们就称之为一个场景，在iOS开发中，最常见的就是一个导航控制器管理着多个子控制器，而每个子控制器我们可以称之为一个场景。下方的示例代码中，我们创建了一个简单的场景（MyScene）。在这个场景中，提供一个文本用于显示场景的名称，另外，还有两个按钮，点击后分别进入下一个场景以及返回上一个场景。

export default class MyScene extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.content}>
          场景：{this.props.title}
        </Text>
        <TouchableHighlight onPress={this.props.onForward}>
          <Text>点我进入下一场景</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.props.onBack}>
          <Text>点我返回上一场景</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Navigator组件简介

React Native中提供了Navigator组件，它可以管理多个页面间的跳转，同时也提供了页面跳转过程中的一些过渡动画，包括平移，水平翻页、垂直弹出等。使用Navigator组件可以实现在应用的不同场景间进行切换，Navigator通过路由对象来分辨不同的场景。利用Navigator组件中提供的renderScene方法，可以根据指定的路由来渲染场景。另外，通过configureScene属性可以获取指定路由对象的配置信息，从而改变场景的动画或者手势。

在创建Navigator组件时，需要通过设置initialRoute属性来定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。而renderScene函数则用来渲染指定路由的场景。

<Navigator
  initialRoute={{title: '场景1', index: 0}}
  renderScene={...}}
/>

Navigator组件提供了多个用于控制场景切换的方法，最常使用的是push()和pop()。push()方法用来过渡到一个新的场景，而pop()方法则可以返回到上一个场景。

//打开新场景
navigator.push({
  title: '场景2',
  index: 1,
});

//返回上一个场景
navigator.pop();

示例代码

在下方的示例代码中，我们创建了一个Navigator组件，并且通过点击其中的按钮可以实现场景的前进以及回退。

• 在终端中执行如下命令，创建NavigatorDemo工程；

react-native init NavigatorDemo

• 在工程中添加一个MyScene.js文件，用于实现MyScene组件。首先，导入使用到的组件并且设置样式。

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  content: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

• 在MyScene组件中，提供了一个Text组件用于显示当前场景的名称，另外还有两个Button组件，分别用于实现场景的前进和回退操作。

import MyScene from './MyScene';

export default class MyScene extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.content}>
          场景：{this.props.title}
        </Text>
        <TouchableHighlight onPress={this.props.onForward}>
          <Text>点我进入下一场景</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.props.onBack}>
          <Text>点我返回上一场景</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

• 打开工程的index.ios.js文件，编写组件所使用的样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

• 创建一个Navigator组件，在其中添加一个自定义MyScene组件。

export default class NavigatorDemo extends Component {
  render() {
    return (
      <Navigator
      initialRoute={{title: '场景1', index: 0}}
      renderScene={(route, navigator) =>
        <MyScene
          title={route.title}
          onForward={() => {
            var nextIndex = route.index + 1;
            navigator.push({
              title: '场景 ' + (nextIndex + 1),
              index: nextIndex,
            });
          }}
          onBack={() => {
            if (route.index > 0) {
              navigator.pop();
            }
          }}
        />
      }
      />
    );
  }
}

• 使用import加载项目所使用的模块，并且注册组件NavigatorDemo成为整个应用的根容器。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator
} from 'react-native';

AppRegistry.registerComponent('NavigatorDemo', () => NavigatorDemo);

• 在终端中执行下面的命令运行程序，在iOS模拟器中可以看到展示的场景样式，当我们点击按钮可以实现不同场景的切换。

react-native run-ios

---