强烈推荐使用该三方

如果在使用过程中遇到什么问题，可以加入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 })