(一)簡(jiǎn)介:

導(dǎo)航組件Navigator可以讓我們客戶端在不同的頁(yè)面見(jiàn)進(jìn)行切換。為了達(dá)到這樣的功能，Navigator提供了路由對(duì)象功能進(jìn)行區(qū)分識(shí)別每一個(gè)頁(yè)面。同時(shí)我們可以通過(guò)renderScene方法，Navaigator根據(jù)指定的路由進(jìn)行渲染指定的界面。

除了以上功能之外，為了改變頁(yè)面切換的動(dòng)畫或者頁(yè)面的手勢(shì)，該組件還提供configureScene屬性來(lái)進(jìn)行獲取指定路由頁(yè)面的配置對(duì)象信息。對(duì)于頁(yè)面切換動(dòng)畫或者更多的屏幕配置選項(xiàng)信息詳情可以查看Navigator.SceneConfigs

關(guān)于動(dòng)畫手勢(shì)還有如下一些屬性:

1.PushFromRight
2.FloatFromRight
3.FloatFromLeft
4.FloatFromBottom
5.FloatFromBottomAndroid
6.FadeAndroid
7.HorizontalSwipeJump
8.HorizontalSwipeJumpFromRight
9.VerticalUpSwipeJump
10VerticalDownSwipeJump
更多屬性大家可以進(jìn)行修改NavigatorSceneConfigs.js該文件即可

(二)導(dǎo)航器方法

在使用導(dǎo)航器的時(shí)候，如果你已經(jīng)獲取了導(dǎo)航器對(duì)象的引用，我們可以進(jìn)行調(diào)用以下一些方法來(lái)實(shí)現(xiàn)頁(yè)面導(dǎo)航功能:

getCurrentRoutes() 該進(jìn)行返回存在的路由列表信息
jumpBack() 該進(jìn)行回退操作 但是該不會(huì)卸載(刪除)當(dāng)前的頁(yè)面
jumpForward() 進(jìn)行跳轉(zhuǎn)到相當(dāng)于當(dāng)前頁(yè)面的下一個(gè)頁(yè)面
jumpTo(route) 根據(jù)傳入的一個(gè)路由信息，跳轉(zhuǎn)到一個(gè)指定的頁(yè)面(該頁(yè)面不會(huì)卸載刪除)
push(route) 導(dǎo)航切換到一個(gè)新的頁(yè)面中，新的頁(yè)面進(jìn)行壓入棧。通過(guò)jumpForward()方法可以回退過(guò)去
pop() 當(dāng)前頁(yè)面彈出來(lái)，跳轉(zhuǎn)到棧中下一個(gè)頁(yè)面，并且卸載刪除掉當(dāng)前的頁(yè)面
replace(route) 只用傳入的路由的指定頁(yè)面進(jìn)行替換掉當(dāng)前的頁(yè)面
replaceAtIndex(route,index) 傳入路由以及位置索引，使用該路由指定的頁(yè)面跳轉(zhuǎn)到指定位置的頁(yè)面
replacePrevious(route) 傳入路由，通過(guò)指定路由的頁(yè)面替換掉前一個(gè)頁(yè)面
resetTo(route) 進(jìn)行導(dǎo)航到新的界面，并且重置整個(gè)路由棧
immediatelyResetRouteStack(routeStack) 該通過(guò)一個(gè)路由頁(yè)面數(shù)組來(lái)進(jìn)行重置路由棧
popToRoute(route) 進(jìn)行彈出相關(guān)頁(yè)面，跳轉(zhuǎn)到指定路由的頁(yè)面，彈出來(lái)的頁(yè)面會(huì)被卸載刪除
popToTop() 進(jìn)行彈出頁(yè)面，導(dǎo)航到棧中的第一個(gè)頁(yè)面，彈出來(lái)的所有頁(yè)面會(huì)被卸載刪除

(三)導(dǎo)航器屬性風(fēng)格

configureScene function 方法，該為可選的方法進(jìn)行配置頁(yè)面切換動(dòng)畫和手勢(shì)。該會(huì)通過(guò)路由和路由棧兩個(gè)參數(shù)調(diào)用，進(jìn)行返回一個(gè)頁(yè)面參數(shù)配置對(duì)象：(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
initialRoute object 參數(shù)對(duì)象 進(jìn)行設(shè)置導(dǎo)航初始化的路由頁(yè)面。路由是標(biāo)識(shí)導(dǎo)航器渲染標(biāo)識(shí)每一個(gè)頁(yè)面的對(duì)象。initialRoute必須為initialRouteStack中的路由。同時(shí)initialRoute默認(rèn)為initialRouteStack中路由棧的最后一項(xiàng)
initialRouteStack [object] 參數(shù)對(duì)象數(shù)組 該是一個(gè)初始化的路由數(shù)組進(jìn)行初始化。如果initalRoute屬性沒(méi)有設(shè)置的話，那么就必須設(shè)置initialRouteStack屬性，使用該最后一項(xiàng)作為初始路由。 如果initalRouteStack屬性沒(méi)有設(shè)置的話，該會(huì)生成只包含initalRoute值的數(shù)組
navigationBar node 該為可選的參數(shù)，在頁(yè)面切換中用來(lái)提供一個(gè)導(dǎo)航欄
navigator object 該為可選參數(shù)，可以從父類導(dǎo)航器中獲取導(dǎo)航器對(duì)象
onDidFoucs function 該方法已經(jīng)廢棄，我們可以使用navigationContext.addListener('didfocus',callback)方法進(jìn)行替代。該會(huì)在每次頁(yè)面切換完成或者初始化之后進(jìn)行調(diào)用該方法。該參數(shù)為新頁(yè)面的路由
onWillFocus function 該方法已經(jīng)廢棄，我們可以使用navigationContext.addListener('willfocus',callback)方法進(jìn)行替代。該會(huì)頁(yè)面每次進(jìn)行切換之前調(diào)用
renderScene function 該為必須調(diào)用的方法，該用來(lái)渲染每一個(gè)路由指定的頁(yè)面。參數(shù)為路由以及導(dǎo)航器對(duì)象兩個(gè)參數(shù)，具體是方法如下:(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />
sceneStyle 樣式風(fēng)格，該繼承了View視圖的所有樣式風(fēng)格?？梢詤⒄?點(diǎn)擊查看View樣式。 該設(shè)置用于每個(gè)頁(yè)面容器的風(fēng)格

(四)導(dǎo)航器實(shí)例

上面給大家介紹一下導(dǎo)航器組件的基本使用和屬性，下面給大家演示一下導(dǎo)航器Navigator的實(shí)例使用（通過(guò)官方實(shí)例修改），具體代碼如下:

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

//創(chuàng)建組件
class NavButton extends React.Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#B5B5B5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
class NavMenu extends React.Component {
  render() {
    return (
      <View style={styles.scene}>
        <Text style={styles.messageText}>{this.props.message}</Text>
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: '向右拖拽關(guān)閉頁(yè)面',
              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
            });
          }}
          text="從右邊向左切入頁(yè)面(帶有透明度變化)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: '向下拖拽關(guān)閉頁(yè)面',
              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
            });
          }}
          text="從下往上切入頁(yè)面(帶有透明度變化)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.pop();
          }}
          text="頁(yè)面彈出(回退一頁(yè))"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.popToTop();
          }}
          text="頁(yè)面彈出(回退到最后一頁(yè))"
        />
      </View>
    );
  }
}
class NavigatorDemo extends Component {
  render() {
    return (
      <Navigator
        style={styles.container}
        initialRoute={{ message: '初始頁(yè)面', }}
        renderScene={ (route, navigator) => <NavMenu
            message={route.message}
            navigator={navigator}
          />}
         configureScene={(route) => {
          if (route.sceneConfig) {
            return route.sceneConfig;
          }
          return Navigator.SceneConfigs.FloatFromBottom;
        }}
      />
    );
  }
}
const styles = StyleSheet.create({
   container: {
    flex: 1,
   },
   messageText: {
    fontSize: 17,
    fontWeight: '500',
    padding: 15,
    marginTop: 50,
    marginLeft: 15,
  },
  button: {
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#CDCDCD',
  },
});
 
AppRegistry.registerComponent('NavigatorDemo', () => NavigatorDemo);

Demo下載: http://pan.baidu.com/s/1hshmaX2 密碼: cwk2
效果:

Navigator.gif