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

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

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

Demo示例

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

特点

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

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

常用功能介绍

• 正向跳转
• 正向跳转并传值
• 反向跳转
• 反向跳转并传值
• 指定页面跳转
• 指定页面跳转并传值

正向跳转

假设情景：从Home页跳转到Profile页面，Profile场景的key值为profile

• 不带参数 onPress={() => {Actions.proflie()}}
• 带参数onPress={() => {Actions.proflie({key: value})}}

在Profile界面接收参数：this.props.key

反向跳转

假设情景：从Profile页返回Home页面

• 返回上一页面，不带参数Actions.pop()
• 返回上一页面，带参数Actions.pop({refresh: ({key: value})})
• 指定回退页面数Actions.pop({popNum: 2})
• 指定回退页面数，带参数Actions.pop({popNum: 2, refresh:({key: value})})
• 返回指定页面Actions.popTo('home')

注意

• refresh是框架自带函数，可用于刷新属性（props）
• Actions.pop({refresh: ({key: value})}) // 用于刷新回退到的页面的属性
• Actions.refresh('params') // 用于刷新当前页面的属性对应回退页面刷新属性，即接受传递的参数

如何使用

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

• 在你的index.js级别的文件中使用Scene组件定义你的scenes，并且Scene组件作为Router的子节点。因为后面Scene将由Router来控制其行为。

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>
  }
}

// 或者，在编译期定义你所有的scenes，并在后面的Router里面使用

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

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="login" component={Login} title="Login"/>
    <Scene key="register" component={Register} title="Register"/>
    <Scene key="home" component={Home}/>
  </Scene>
)

class App extends React.Component {
  render() {
    return <Router scenes={scenes}/>
  }
}

• 定义好之后，在任意地方通过导入 import {Actions} from 'react-native-router-flux' 获得Actions 对象，Actions对象将是我们操作Scenes的遥控器。通过Actions我们可以向Router发出动作让Router控制Scene变化。

更多文章

• 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM：欢迎小伙伴们 star
• 作者简书主页：包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们：多多关注，多多点赞