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 的属性。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于