react-native-router-flux 是React Native的一个基于Navigation API 的一个路由组件。
功能:
- 集中定义routers和scene
- 集成navigator,无需再在页面之间传递navigator
- 可以在任何地方简单方便地调用场景切换,如跳转到登录页面:Actions.login({username, password}
特点:
- 可以高度自定义Navigation bar
- 支持tab bar,如react-native-tabs
- 支持嵌套的Navigators,如每个tab都可以有自己的Navigator
- 自定义Scene Renderers
- 动态路由,可以通用应用的不同状态动态选择要切换的场景
- 自己特有的Reducer
- 可以重置已经切换过的场景
- 强大的state控制机制
安装
npm i react-native-router-flux --save
使用
在index.js中定义应用的场景,例如:
import {Scene, Router} from 'react-native-router-flux';
class App extends React.Component {
render() {
return <Router>
<Scene key="root">
<Scene key="login" component={Login} title="Login"/>
<Scene key="register" component={Register} title="Register"/>
<Scene key="home" component={Home}/>
</Scene>
</Router>
}
}
Actions
定义完Router之后就可以使用Actions来跳转场景了
添加引用:
import {Actions} from 'react-native-router-flux'
跳转到某个场景
Actions.ACTION_NAME(PARAMS) //如跳转到login,Actions.login
返回上一个场景
Actions.pop() //pop当前场景
{popNum: [number]} //可以弹出多个场景
{refresh: {...propsToSetOnPreviousScene}} //刷新并跳转某个场景
刷新当前场景:
Actions.refresh(PARAMS)