場景（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

---