一、Navigator

1、簡單介紹：大多數時候我們都需要導航器來應對不同場景（頁面）間的切換。它通過路由對象來分辨不同的場景，我們這里采用的就是renderScene方法，根據指定的路由來渲染。

2、利用Navigator彈出用到的方法：

（1initialRoute={{ name: 'home', component: HomeScene }} 這個指定了默認的頁面，也就是啟動的組件頁面

(2configureScene={() => {

return Navigator.SceneConfigs.HorizontalSwipeJump;

}}

這個是頁面之間跳轉時候的動畫,可以看這個目錄:

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳轉的時候的方向)

（3renderScene：兩個參數中的route包含的事initial的時候傳遞的name和component，而navigator是一個我們需要用的Navigator的對象，所以當我們拿到route中的component的時候，我們就可以將navigator傳遞給它，正因為如此，我們的組件HomeScene才可以通過this.props.navigator，拿到路由。

（4 如果需要傳參數，則在push的參數后面加多一個參數params，把JSON往死填就好了，這里的params，其實就是在renderScene中return的{...route.params},這樣接收的頁面只需要通過this.props.id，就可以拿到我們傳遞的參數

（5 OK，那參數怎么回傳呢？回調！通過定義一個回調函數，利用this.props 去調用，把參數回傳回來

完整代碼：

/**

* Sample React Native App

* https://github.com/facebook/react-native

*/'use strict';varReact = require('react-native');//增加NavigatorIOSvar{? AppRegistry,? StyleSheet,? Text,? View,? Navigator,? TouchableHighlight,} = React;/*--? 啟動組件 --*/varMainClass = React.createClass({? render:function() {//component這里設置的是這個組件啟動的時候顯示的第一個子組件return({? ? ? ? ? ? ? return Navigator.SceneConfigs.HorizontalSwipeJump;? ? ? ? ? }}? ? ? ? ? renderScene={(route, navigator) => {? ? ? ? ? ? let Component = route.component;? ? ? ? ? ? if(route.component) {? ? ? ? ? ? ? return}? ? ? ? ? }} >);? },});/*--? 首頁頁面組件 --*/var HomeScene = React.createClass({? getInitialState:function () {? ? return {? ? ? id: 'AXIBA001',? ? ? flag: null? ? };? },? render: function() {? ? return (push me!{this.state.flag && ' I \'m ' + this.state.flag + ', i come from second page'});? },? onPress: function() {? ? var _me = this;? ? //或者寫成 const navigator = this.props.navigator;? ? const { navigator } = this.props;? ? if(navigator)? ? {? ? ? ? navigator.push({? ? ? ? ? ? name: 'touch View',? ? ? ? ? ? component: SecondScene,? ? ? ? ? ? params: {? ? ? ? ? ? ? ? id: this.state.id,? ? ? ? ? ? ? ? getSomething:function(flag) {? ? ? ? ? ? ? ? ? _me.setState({? ? ? ? ? ? ? ? ? ? flag: flag? ? ? ? ? ? ? ? ? });? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? })? ? }? }});/*--? push后的頁面組件 --*/var SecondScene = React.createClass({? render: function() {? ? return (push sucess!I get {this.props.id},i want back!);? },? onPress: function() {? ? //或者寫成 const navigator = this.props.navigator;? ? const { navigator } = this.props;? ? if(this.props.getSomething) {? ? ? var flag = 'Axiba002'? ? ? this.props.getSomething(flag);? ? }? ? if(navigator) {? ? ? navigator.pop();? ? }? }});/*布局樣式*/var styles = StyleSheet.create({? container: {? ? flex: 1,? ? // justifyContent: 'center',? ? // alignItems: 'center',? ? backgroundColor: '#F5FCFF',? },? home: {? ? paddingTop:74,? },});AppRegistry.registerComponent('AwesonProject', () => MainClass);

補充一些可能會用到的Navigator方法：

getCurrentRoutes() - 獲取當前棧里的路由，也就是push進來，沒有pop掉的那些。

jumpBack() - 跳回之前的路由，當然前提是保留現在的，還可以再跳回來，會給你保留原樣。

jumpForward() - 上一個方法不是調到之前的路由了么，用這個跳回來就好了。

jumpTo(route) - 跳轉到已有的場景并且不卸載。

push(route) - 跳轉到新的場景，并且將場景入棧，你可以稍后跳轉過去

pop() - 跳轉回去并且卸載掉當前場景

replace(route) - 用一個新的路由替換掉當前場景

replaceAtIndex(route, index) - 替換掉指定序列的路由場景

replacePrevious(route) - 替換掉之前的場景

immediatelyResetRouteStack(routeStack) - 用新的路由數組來重置路由棧

popToRoute(route) - pop到路由指定的場景，其他的場景將會卸載。

popToTop() - pop到棧中的第一個場景，卸載掉所有的其他場景。

二、NavigatorIOS

1、NavigatorIOS包裝了UIKit的導航功能，可以使用左劃功能來返回到上一界面。

2、同上包含的方法有：

push(route)- 導航器跳轉到一個新的路由。

pop()- 回到上一頁。

popN(n)- 回到N頁之前。當N=1的時候，效果和pop()一樣。

replace(route)- 替換當前頁的路由，并立即加載新路由的視圖。

replacePrevious(route)- 替換上一頁的路由/視圖。

replacePreviousAndPop(route)- 替換上一頁的路由/視圖并且立刻切換回上一頁。

resetTo(route)- 替換最頂級的路由并且回到它。

popToRoute(route)- 一直回到某個指定的路由。

popToTop()- 回到最頂層的路由。

代碼：

/**

* Sample React Native App

* https://github.com/facebook/react-native

*/'use strict';varReact = require('react-native');//增加NavigatorIOSvar{? AppRegistry,? StyleSheet,? Text,? View,? NavigatorIOS,? TouchableHighlight,} = React;/*有這樣一些需求？：自定義barBarItem，例如自定義名字、圖片？*//*--? 啟動組件 --*/varMainClass = React.createClass({? onRightButtonPress:function(){this.refs.nav.push({? ? ? title:'push view',? ? ? component: SecondScene,? ? });? },? render:function() {//component這里設置的是這個組件啟動的時候顯示的第一個子組件return();? },});/*--? 首頁頁面組件 --*/var HomeScene = React.createClass({? render: function() {? ? return (push me!);? },? onPress: function() {? ? this.props.navigator.push({? ? ? title: 'touch View',? ? ? component: SecondScene,? ? ? passProps: { myProp: 'Axiba001' },? ? });? }});/*--? push后的頁面組件 --*/var SecondScene = React.createClass({? render: function() {? ? return (push sucess!{'hi,this is prams:'+ this.props.myProp});? },});/*布局樣式*/var styles = StyleSheet.create({? container: {? ? flex: 1,? ? // justifyContent: 'center',? ? // alignItems: 'center',? ? backgroundColor: '#F5FCFF',? },? home: {? ? paddingTop:74,? },});AppRegistry.registerComponent('AwesonProject', () => MainClass);

回調函數基本相同，但是注意還有一些對導航欄的控制，例如：

（1 barTintColorstring

導航條的背景顏色。

（2 initialRoute{component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTitle: string, leftButtonIcon: Image.propTypes.source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image.propTypes.source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object]}

NavigatorIOS使用"路由"對象來包含要渲染的子視圖、它們的屬性、以及導航條配置。"push"和任何其它的導航函數的參數都是這樣的路由對象。

（3 itemWrapperStyleView#style

導航器中的組件的默認屬性。一個常見的用途是設置所有頁面的背景顏色。

（4 navigationBarHiddenbool

一個布爾值，決定導航欄是否隱藏。

（ 5 shadowHiddenbool

一個布爾值，決定是否要隱藏1像素的陰影

（ 6 tintColorstring

導航欄上按鈕的顏色。

（ 7 titleTextColorstring

導航器標題的文字顏色。

（8 translucentbool

一個布爾值，決定是否導航條是半透明的。

相關的鏈接地址在這里:http://www.tuicool.com/articles/z226zin