導(dǎo)航 Navigator
在一個(gè)實(shí)際的移動(dòng)應(yīng)用當(dāng)中，極少會(huì)有只包含一個(gè)界面的應(yīng)用梭域，大部分情況下，需要在應(yīng)用的各個(gè)界面之間進(jìn)行跳轉(zhuǎn)。因此藐窄，我們需要使用導(dǎo)航組件來(lái)引導(dǎo)和管理界面之間的跳轉(zhuǎn)。
在大多數(shù) iOS 和 Android 應(yīng)用中酬土，我們經(jīng)常會(huì)看到在頂部或者底部有「返回」或者跳轉(zhuǎn)到其他界面的按鈕荆忍，這些都屬于導(dǎo)航組件，導(dǎo)航組件還有一個(gè)作用就是管理界面與界面之間的跳轉(zhuǎn)撤缴。
場(chǎng)景 Scene
要了解導(dǎo)航組件刹枉，就必須引入「場(chǎng)景（Scene）」的概念。簡(jiǎn)單說(shuō)屈呕，導(dǎo)航組件管理的每一個(gè)用戶界面都被稱作一個(gè)場(chǎng)景微宝，導(dǎo)航組件所做的就是負(fù)責(zé)管理用戶界面從一個(gè)場(chǎng)景跳轉(zhuǎn)到另一個(gè)場(chǎng)景。一個(gè)場(chǎng)景其實(shí)就是一個(gè)普通的組件虎眨，有自己的屬性（props）蟋软、狀態(tài)（state）以及子組件，當(dāng)它被一個(gè)導(dǎo)航組件管理并作為其中的一個(gè)用戶界面時(shí)嗽桩，便被成為一個(gè)場(chǎng)景岳守。
我們用一個(gè)例子來(lái)解釋。首先創(chuàng)建一個(gè) MyScene.js 文件碌冶，在其中創(chuàng)建一個(gè)視圖組件 MyScene：
import React, { Component, PropTypes } from 'react'
import { View, Text} from 'react-native'
export default class MyScene extends Component {
static get defaultProps() {
return {
title: 'MyScene'
}
}
render() {
return(
<View style={{paddingTop: 22}}>
<Text>This is: {this.props.title}</Text>
</View>
)
}
}
然后湿痢，在 index.*.js 中引入該組件：
import MyScene from './MyScene';
之后，像使用其他視圖組件一樣使用便可以了种樱，此時(shí)運(yùn)行蒙袍，屏幕上會(huì)顯示一行文本：“This is MyScene”。
使用 Navigator
接下來(lái)嫩挤，我們開始使用 Navigator 用 MyScene 組件創(chuàng)建多個(gè)可以相互跳轉(zhuǎn)的界面害幅。
先來(lái)編寫 index.*.js 的代碼：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
View,
Navigator,
Text
} from 'react-native';
import MyScene from './MyScene';
export default class HelloWorld extends Component {
render() {
return (
<Navigator
initialRoute = {{ title: 'My Initial Scene', index: 0 }}
renderScene = {(route, navigator) =>
<MyScene
title = {route.title}
// Function to call when a new scene should be diplayed
onForward = {() => {
const nextIndex = route.index + 1;
navigator.push({
title: 'Scene' + nextIndex,
index: nextIndex,
});
}}
// Function to call to go back to the previous Scene
onBack = {() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
)
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
在根視圖中，以 Navigator 為最外層的組件岂昭，該組件有兩個(gè)屬性：
-
initialRoute：該屬性用來(lái)描述導(dǎo)航組件要展示的第一個(gè)場(chǎng)景以现。 -
renderScene：該屬性用來(lái)渲染視圖，兩個(gè)參數(shù)分別是當(dāng)前場(chǎng)景的描述，以及當(dāng)前的導(dǎo)航視圖邑遏。
在上面的例子中佣赖，我們給 MyScene 傳入了三個(gè)屬性值，這三個(gè)屬性會(huì)在之后重寫 MyScene 組件時(shí)實(shí)現(xiàn)它們的功能记盒。
-
title：場(chǎng)景的標(biāo)題憎蛤。 -
onForward：進(jìn)入下個(gè)場(chǎng)景的操作。 -
onBack：返回上個(gè)場(chǎng)景的操作纪吮。
在 Navigator 組件中俩檬，通過(guò) navigator.push() 方法來(lái)進(jìn)行新場(chǎng)景的推入，使用 navigator.pop() 方法來(lái)彈出當(dāng)前場(chǎng)景碾盟，返回上一個(gè)場(chǎng)景棚辽。因此，將這些操作放入組件的屬性中冰肴，一遍在創(chuàng)建組件時(shí)屈藐，將這些操作綁定到相應(yīng)的按鈕上。
我們還需要重寫 MyScene 組件：
import React, { Component, PropTypes } from 'react'
import { View, Text, Navigator, TouchableHighlight } from 'react-native'
export default class MyScene extends Component {
static get defaultProps() {
return {
title: 'MyScene'
}
}
render() {
return(
<View style={{paddingTop: 22}}>
<Text>Current Scene: {this.props.title}</Text>
<TouchableHighlight onPress = {this.props.onForward}>
<Text>Tap me to load the next scene</Text>
</TouchableHighlight>
<TouchableHighlight onPress = {this.props.onBack}>
<Text>Tap me to go back</Text>
</TouchableHighlight>
</View>
)
}
}
MyScene.propTypes = {
title: PropTypes.string.isRequired,
onForward: PropTypes.func.isRequired,
onBack: PropTypes.func.isRequired
};
上例中引入了 TouchableHighlight 組件用來(lái)處理點(diǎn)擊事件來(lái)執(zhí)行場(chǎng)景跳轉(zhuǎn)的函數(shù)熙尉。
此時(shí)運(yùn)行應(yīng)用联逻，效果如下：
