React Native的Navigator，理解起來相對來說不太容易，經(jīng)過一些實踐之后談?wù)勎业睦斫?。參考的?a target="_blank" rel="nofollow">這篇文章的代碼

零

首先從原理上，Navigator是用來作為組件之間的導(dǎo)航器。而缺乏類似Router性質(zhì)的東西時，最簡單的辦法是將下個組件（也叫場景Scene），直接告訴導(dǎo)航器。所以就需要在頁面的上面引入下個組件。 另外就是不要忘記引入 Navigator。

一

export default class SampleComponent extends React.Component {
        render() {
            let defaultName = 'FirstPageComponent';// 第一個要展示的組件
            let defaultComponent = FirstPageComponent;
            return (
            <Navigator
              initialRoute={{ name: defaultName, component: defaultComponent }}
              configureScene={(route) => {
                return Navigator.SceneConfigs.VerticalDownSwipeJump;
              }}
              renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator={navigator} />
              }} />
            );
        }
    } 

initialRoute={{ name: defaultName, component: defaultComponent }}
Navigator實現(xiàn)跳轉(zhuǎn)，是通過Push和Pop方法，相當于是一個數(shù)組，每要跳到下個Scene（場景），就把下個頁面push到這個數(shù)組中，當想要后退的時候，再把這個Pop出去。所以這個數(shù)組里存放的肯定是能索引到這個Scene的數(shù)據(jù)，所以理所應(yīng)當存放一個Component鍵是合理的。這里initialRoute的時候除了Component還引入了一個name，這個是可選的，不要也行。
defaultName和defaultComponent存放的就是你要render的第一個Scene，相當于跳轉(zhuǎn)的起點，不一定是就是要點擊的那個組件，但必須是包含在里面的。

configureScene={(route) => { return Navigator.SceneConfigs.VerticalDownSwipeJump; }}

這里定義了跳轉(zhuǎn)的過渡動畫，如果你的編輯器支持的話，可以刪掉最后一節(jié)，看看最其他的選項。
renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }}
這個段代碼執(zhí)行過后，就將你的“defaultComponent”渲染出來了，其中route.componet就是在initialRoute里寫進去的component。
return <Component {...route.params} navigator={navigator} />

渲染了你要展示的第一個頁面，還順便把幾個參數(shù)寫了進去，...route.params這個語法是要展開所有params，現(xiàn)在你initialRoute的時候沒有寫 params，但是以后在頁面之間傳遞參數(shù)的時候就會要寫的。假如，InitialRoute的時候?qū)懥耍?/p>

initialRoute={{ name: defaultName, component: defaultComponent params:{ id:123} }}

這就相當于 ：

return <Component id={route.params.id} navigator={navigator} />

對，就是這么神奇。你會發(fā)現(xiàn)就可以在你渲染的頁面里，通過this.props.id找到這個參數(shù)了，當然還有后面?zhèn)魅氲膎avigator，你也可以在props中找到。

二

現(xiàn)在只是剛剛定義好了導(dǎo)航器而已，在現(xiàn)在這個渲染的組件里，找一個可以Touchable開頭的組件，在屬性里寫個onPress={}屬性。假設(shè)點擊這個組件，就要前往下個頁面。

此時導(dǎo)航器需要知道下一個Scene是哪里，所以先在頭部將需要跳轉(zhuǎn)的Scene引入。

在點擊事件的回調(diào)函數(shù)里，

 _pressButton(id) {
    const {navigator} = this.props;
    if (navigator) {
      navigator.push({
        name: 'StoryTeller',
        component: StoryTeller,
        params: {
          id: id
        }
      })
    }
  }

const {navigator} = this.props; 這么寫相當于 const navigator = this.props.navigator

點擊事件發(fā)生后，需要要把下個Scene給Push到navigator中，同樣還有看起來沒什么用的name。注意這里同樣傳了params，在這里不用手動return出來要加載的頁面了，navigator會依照之前的模式，直接開始渲染。相當于：
<StoryTeller id={id} name='StoryTeller' navigator={this.props.navigator} />

三

跳回來，使用的是Pop方法。和Push類似，不過不用寫參數(shù)：

  onBackAndroid = ()=> {
    const nav = this.props.navigator;
    const routers = nav.getCurrentRoutes();
    if (routers.length > 1) {
      nav.pop();
    }
  };

navigator 對象里最后進去的，一定是當前的頁面，所以初始化的時候數(shù)組的長度為1，這里有一個判斷，當這個數(shù)組的=1的時候，就不再跳轉(zhuǎn)，直接執(zhí)行退出應(yīng)用。這里適合具有多次點擊返回時候(例如安卓返回鍵)，一般的點擊返回直接執(zhí)行navigator的Pop方法即可。

  _pressButton() {
        const { navigator } = this.props;
        if(navigator) {
            navigator.pop();
        }
    }