react-native-router-flux组件基础使用教程分为一二两部分教程。教程一主要讲解router-flux的使用方式，教程二主router-flux官方提供的各种API。

react-native-router-flux 组件用法详解(一)

Demo示例

https://github.com/guangqiang-liu/react-native-routerFluxDemo

官方常用API

Available imports

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

Router

Scene

Stack (<Stack>)

A component to group Scenes together for its own stack based navigation. Using this will create a separate navigator for this stack, so expect two navbars to appear unless you add hideNavBar.

Tab Scene (child <Scene> within Tabs)

Drawer(<Drawer> or <Scene drawer>)

Can use all prop as listed in Scene as <Drawer>, syntatic sugar for <Scene drawer={true}>

Modals (<Modal> or <Scene modal>)

To implement a modal, you must use <Modal> as the root scene in your Router. The Modal will render the first scene (should be your true root scene) normally, and all following To display a modal use <Modal> as root renderer, so it will render the first element as normal scene and all others as popups (when they are pushed).

Example: In the example below, the root Scene is nested within a <Modal>, since it is the first nested Scene, it will render normally. If one were to push to statusModal, errorModal or loginModal, they will render as a Modal and by default will pull up from the bottom of the screen. It is important to note that currently the Modal does not allow for transparent backgrounds.

//... 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 is a component used to render a component on top of the current Scene. Unlike modal, it will allow for resizing and transparency of the background.

Example: In the example below, the root Scene is nested within a <Lightbox>, since it is the first nested Scene, it will render normally. If one were to push to loginLightbox, they will render as a Lightbox and by default will lay on top of the current Scene allowing for transparent backrounds.

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

This Object is the main utility is to provide navigation features to your application. Assuming your Router and Scenes are configured properly, use the properties listed below to navigate between scenes. Some offer the added functionality to pass React props to the navigated scene.

These can be used directly, for example, Actions.pop() will dispatch correspond action written in the source code, or, you can set those constants in scene type, when you do Actions.main(), it will dispatch action according to your scene type or the default one.

ActionConst

在定义scene类型或者action参数时，我们可以指定类型

Actions.ROUTE_NAME({type: 'reset'})

<Scene key="myscene" type="replace" >

但是当传入reducer时，它将被转换成一个静态常量值，为了一致性，我们推荐总是使用常量的去替换字符串

Actions.ROUTE_NAME({type: ActionConst.RESET})

<Scene key="myscene" type={ActionConst.REPLACE} >

Type constants to determine Scene transitions, These are PREFERRED over typing their values manually as these are subject to change as the project is updated.

• replace:告诉导航器使用一个新的route来替换当前的route
• actionSheet:以弹出的方式展示一个Action Sheet，你必须传入一个回调作为回调方法。
• modal:在导航组件后的路由栈中插入该类型定义的组件。它可以被作为一个弹出的提示框使用，也可以在任何导航传输之前（像登录授权处理）做一些必须处理的操作进行使用。我们可以使用Actions.dismiss()关闭它。（类似android原生种的* dialog，ios中的模态视图）。
• switch：在tab 场景下使用。（一般是点击底部按钮切换不同的scene）。
• reset：类似replace，但是它在导航栈中卸载了该组件。
• transitionToTop:如果路由有sceneConfig配置，如： ，将根据name重置路由堆栈中的路由和动画。

Animation

Gestures(手势)

Scene styles

Tabs (<Tabs> or <Scene tabs>)

Navigation Bar

Navigation Bar(Title)

Navigation Bar（Back button）

Navigation Bar（Left button）

Navigation Bar（Right button）

官方地址

https://github.com/aksonov/react-native-router-flux

官方API

https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md

参考文献

http://www.cnblogs.com/yz1311/p/6086234.html
http://blog.csdn.net/jiecsdn/article/details/58652511
http://blog.csdn.net/jiecsdn/article/details/58721919
http://blog.csdn.net/jiecsdn/article/details/59057026