強烈推薦使用該三方

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

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

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

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

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

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

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

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

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>)

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

Stack (<Stack>)

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

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)該是你真正的根場景）橙喘，它將渲染第一個元素作為正常場景，其他所有元素作為彈出窗口（當它們 被push）胶逢。

示例：在下面的示例中厅瞎，root場景嵌套在<Modal>中，因為它是第一個嵌套Scene初坠，所以它將正常呈現(xiàn)和簸。如果要push到statusModal，errorModal或者loginModal碟刺，他們將呈現(xiàn)為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不同，它將允許調(diào)整大小和背景的透明度浩村。

示例：
在下面的示例中做葵，root場景嵌套在中<Lightbox>，因為它是第一個嵌套Scene心墅，所以它將正常呈現(xiàn)蜂挪。如果要push到loginLightbox，他們將呈現(xiàn)為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

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

這些可以直接使用，例如氢橙，Actions.pop()將在源代碼中實現(xiàn)的操作酝枢，或者，您可以在場景類型中設(shè)置這些常量悍手，當您執(zhí)行Actions.main()時帘睦，它將根據(jù)您的場景類型或默認值來執(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 />,采蚀，那么我們還需要導航到我們的移動<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 })