react-native-router-flux 使用详解（一）

1、react-native-router-flux 是一个路由包

特性：

在一个中心区域定义可切换 scene 模块。在使用过程中，跟 react-native 提供的 navigator 的区别是你不需要有 navigator 对象。你可以在任意地方使用简单的语法去控制 scene 的切换，如：Actions.login({username, password}) or Actions.profile({profile}) or 甚至 Actions.profile(123)

所有的参数将被注入到 this.props 中给 Sene 组件使用。

功能和亮点：

高可定制的导航条：由 Scene 或者 Scene 的 state 去控制导航条的 show／hide

Tab Bar 支持使用 react-native-tabs

嵌套导航：每一个 tab 都可以有自己的导航，该导航被嵌套在 root 导航中。

使用 Action sheet 来自定义场景渲染器。

动态路由：动态路由将允许你通过应用的 state 去选着哪个 scene 将被渲染。

引入自己的 Reducer（我这样理解的：组装者，可以看 redux）：可以为导航引入自己的 reducer state。

Reset History stack 重置历史栈：新的 reset 类型将提供清除历史栈河消除导航的返回按钮的功能。

More Powerful state control 更加强大的状态控制：在多个 scene 中可以有不同的 state。

第一步：安装 dependencies

npm i react-native-router-flux --save

使用方式一：

In your top-level index.js, define your scenes using the Scene component and pass it into the Router as children:

在你的 index.js 级别的文件中使用 Scene 组件定义你的 scenes，并且 Scene 组件作为 Router 的子节点。

因为后面 Scene 将由 Router 来控制其行为。

import {Scene, Router} from 'react-native-router-flux';

class App extends React.Component {
render() {
return

}
}

第二种使用方式：

Alternatively, you could define all of your scenes during compile time and use it later within Router:

你可以在编译期定义你所有的 scenes，并在后面的 Router 里面使用。

import {Actions, Scene, Router} from 'react-native-router-flux';

const scenes = Actions.create(

);

/* ... */

class App extends React.Component {
render() {
return
}
}

定义好之后如何使用呢：

在任意地方通过导入

import {Actions} from 'react-native-router-flux'

获得 Actions 对象，Actions 对象将是我们操作 Scenes 的遥控器。通过 Actions 我们可以向 Router 发出动作让 Router 控制 Scene 变化。

• Actions.ACTION_NAME(PARAMS) will call the appropriate action and params will be passed to the scene.

• 调用 Actions.ACTION_NAME(PARAMS)可以展示一个scene，参数将被注入scene中。

• Actions.pop() will pop the current screen. It accepts following optional params:

• Actions.pop()方法将会弹出当前的 scene，他接受如下可选参数

  • {popNum: [number]} allows to pop multiple screens at once
  • {popNum:[number]}允许你去一次弹出多个 scene
  • {refresh: {...propsToSetOnPreviousScene}} allows to refresh the props of the scene that it pops back to
  • {refresh:{...propsToSetOnPreviousScene}}允许你去刷新 pop 后的 scene。

• Actions.refresh(PARAMS) will update the properties of the current screen.

• Actions.refresh(PARAMS)会更新当前 scene 的属性。