react-native-router-flux組件基礎(chǔ)使用教程分為一二兩部分教程。教程一主要講解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參數(shù)時(shí)，我們可以指定類型

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

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

但是當(dāng)傳入reducer時(shí)，它將被轉(zhuǎn)換成一個(gè)靜態(tài)常量值，為了一致性，我們推薦總是使用常量的去替換字符串

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:告訴導(dǎo)航器使用一個(gè)新的route來替換當(dāng)前的route
• actionSheet:以彈出的方式展示一個(gè)Action Sheet，你必須傳入一個(gè)回調(diào)作為回調(diào)方法。
• modal:在導(dǎo)航組件后的路由棧中插入該類型定義的組件。它可以被作為一個(gè)彈出的提示框使用，也可以在任何導(dǎo)航傳輸之前（像登錄授權(quán)處理）做一些必須處理的操作進(jìn)行使用。我們可以使用Actions.dismiss()關(guān)閉它。（類似android原生種的* dialog，ios中的模態(tài)視圖）。
• switch：在tab 場景下使用。（一般是點(diǎn)擊底部按鈕切換不同的scene）。
• reset：類似replace，但是它在導(dǎo)航棧中卸載了該組件。
• transitionToTop:如果路由有sceneConfig配置，如： ，將根據(jù)name重置路由堆棧中的路由和動(dòng)畫。

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

參考文獻(xiàn)

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