強烈推薦使用該三方

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

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

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

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

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

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

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

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

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。父節(jié)點<Scene>不能將component作為prop，因為它將作為其子節(jié)點的組件。

Tabs (<Tabs> or <Scene tabs>)

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

Stack (<Stack>)

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

Tab Scene (child <Scene> within Tabs)

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

Drawer (<Drawer> or <Scene drawer>)

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

Modals (<Modal> or <Scene modal>)

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

示例：在下面的示例中，root場景嵌套在<Modal>中，因為它是第一個嵌套Scene，所以它將正常呈現(xiàn)。如果要push到statusModal，errorModal或者loginModal，他們將呈現(xiàn)為Modal，默認(rèn)情況下會從屏幕底部向上彈出。重要的是要注意，目前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是用于將組件渲染在當(dāng)前組件上Scene的組件 。與Modal不同，它將允許調(diào)整大小和背景的透明度。

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

//... 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

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

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

ActionConst

鍵入常量以確定Scene轉(zhuǎn)換，這些是優(yōu)先于手動鍵入其值，因為項目更新時可能會發(fā)生更改。

Universal and Deep Linking

用例

• 考慮這樣一個web應(yīng)用程序和app配對,這可能有一個urlhttps://thesocialnetwork.com/profile/1234/.
• 如果我們同時構(gòu)建一個web應(yīng)用程序和一個移動應(yīng)用程序，我們希望能夠通過path /profile/:id/。
• 在web上，我們可能想要用一個路由器來打開我們的<Profile />和參數(shù){ id: 1234 }
• 在移動設(shè)備上，如果我們正確地設(shè)置了Android / iOS環(huán)境來啟動我們的應(yīng)用程序并打開RNRF<Router />,，那么我們還需要導(dǎo)航到我們的移動<Profile />場景和參數(shù){ 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/在他們的設(shè)備,他們會打開<Router/ >,然后調(diào)用操作Actions.profile({ id:1234 })