強烈推薦使用該三方

如果在使用過程中遇到什么問題，可以加入react-native興趣交流群群號：397885169一起討論學習，也歡迎在評論區評論。

RN項目模板，還未完成，但react-native-router-flux的Demo在里面

本文會持續更新，只要該庫作者不停止更新，那么我也不會停下腳步。

可能很多人之前就用過這個三方，也可能有些人聽過沒用過。在這系列文章中，有這樣幾方面原因：

1. 通用性：在最新的V4版本中是基于react-navigation實現的，如果使用過react-native-router-flux那么使用新版本的學習成本會低很多；

2. 實用性：react-navigation雖然是官方推薦的導航庫，但其庫內部提供的，可以直接使用的功能很簡單，有些還需要配合redux來實現需要的功能。而react-native-router-flux基于react-navigation實現其沒有提供的APIpopTo(跳回指定頁面)，refresh(刷新頁面)，replace，Modal(類似iOS從底部彈出個新頁面的效果)等常用到的功能，在下面的翻譯中有詳細說明；

3. 更新維護：這點上我很佩服庫的作者，從V1更新到V4，從未背離作者的初衷，一直在對react-native的導航進行優化、封裝，而且最讓我佩服的一點是，作者好似將react-navigation的Issues全都翻看過，庫里面將react-navigation可能存在或者已經存在的坑都填上了，而且實時更新。如果有時間，可以查看一下CHANGELOG.md，里面有著全部的更新記錄。

稍后我會提供一個相對完整的Demo來作為對本文的補充，當然，其實作者提供的Demo已經很棒了，但作者將很多功能放在了一起，第一次接觸的時候，很可能會被繞進去。

Available imports

• Router
• Scene
• Tabs
• Stack
• Tabbed Scene
• Drawer
• Modal
• Lightbox
• Actions
• ActionConst

Router:

backAndroidHandler用法：

const onBackPress = () => {
    if (Actions.state.index !== 0) {
      return false
    }
    Actions.pop()
    return true
}

backAndroidHandler={onBackPress}

Scene:

此路由器的最重要的組件， 所有 <Scene> 組件必須要有一個唯一的 key。父節點<Scene>不能將component作為prop，因為它將作為其子節點的組件。

Tabs (<Tabs> or <Scene tabs>)

標簽欄組件。
你可以使用<Scene>中的所有props來作為<Tabs>的屬性。 如果要使用該組件需要設置 <Scene tabs={true}>。

Stack (<Stack>)

將場景組合在一起的組件，用于自己的基于堆棧實現的導航。使用它將為此堆棧創建一個單獨的navigator，因此，除非您添加hideNavBar，否則將會出現兩個導航條。

Tab Scene (child <Scene> within Tabs)

用于實現Tabs的效果展示，可以自定義icon和label。

Drawer (<Drawer> or <Scene drawer>)

用于實現抽屜的效果，如果要使用該組件需要設置 <drawer tabs={true}>。

Modals (<Modal> or <Scene modal>)

想要實現模態，您必須將其<Modal>作為您Router的根場景。在Modal將正常呈現第一個場景（應該是你真正的根場景），它將渲染第一個元素作為正常場景，其他所有元素作為彈出窗口（當它們 被push）。

示例：在下面的示例中，root場景嵌套在<Modal>中，因為它是第一個嵌套Scene，所以它將正常呈現。如果要push到statusModal，errorModal或者loginModal，他們將呈現為Modal，默認情況下會從屏幕底部向上彈出。重要的是要注意，目前Modal不允許透明的背景。

//... import components
<Router>
  <Modal>
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>
    <Scene key="statusModal" component={StatusModal} />
    <Scene key="errorModal" component={ErrorModal} />
    <Scene key="loginModal" component={LoginModal} />
  </Modal>
</Router>

Lightbox (<Lightbox>)

Lightbox是用于將組件渲染在當前組件上Scene的組件 。與Modal不同，它將允許調整大小和背景的透明度。

示例：
在下面的示例中，root場景嵌套在中<Lightbox>，因為它是第一個嵌套Scene，所以它將正常呈現。如果要push到loginLightbox，他們將呈現為Lightbox，默認情況下將放置在當前場景的頂部，允許透明的背景。

//... import components
<Router>
  <Lightbox>
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>

    {/* Lightbox components will lay over the screen, allowing transparency*/}
    <Scene key="loginLightbox" component={loginLightbox} />
  </Lightbox>
</Router>

Actions

該對象的主要工具是為您的應用程序提供導航功能。 假設您的Router和Scenes配置正確，請使用下列屬性在場景之間導航。 有些提供添加的功能，將React道具傳遞到導航場景。

這些可以直接使用，例如，Actions.pop()將在源代碼中實現的操作，或者，您可以在場景類型中設置這些常量，當您執行Actions.main()時，它將根據您的場景類型或默認值來執行動作。

ActionConst

鍵入常量以確定Scene轉換，這些是優先于手動鍵入其值，因為項目更新時可能會發生更改。

Universal and Deep Linking

用例

• 考慮這樣一個web應用程序和app配對,這可能有一個urlhttps://thesocialnetwork.com/profile/1234/.
• 如果我們同時構建一個web應用程序和一個移動應用程序，我們希望能夠通過path /profile/:id/。
• 在web上，我們可能想要用一個路由器來打開我們的<Profile />和參數{ id: 1234 }
• 在移動設備上，如果我們正確地設置了Android / iOS環境來啟動我們的應用程序并打開RNRF<Router />,，那么我們還需要導航到我們的移動<Profile />場景和參數{ id: 1234 }

使用

<Router uriPrefix={'thesocialnetwork.com'}>
  <Scene key="root">
     <Scene key={'home'} component={Home} />
     <Scene key={'profile'} path={"/profile/:id/"} component={Profile} />
     <Scene key={'profileForm'} path={"/edit/profile/:id/"} component={ProfileForm} />
  </Scene>
</Router>

如果用戶點擊http://thesocialnetwork.com/profile/1234/在他們的設備,他們會打開<Router/ >,然后調用操作Actions.profile({ id:1234 })