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

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

react-native-router-flux实战详解(二)

Demo示例

github.com/guangqiang-…

特色

在使用过程当中，跟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地址(按照企业开发标准搭建框架完成开发的)：github.com/guangqiang-…：欢迎小伙伴们 star
• 做者简书主页：包含60多篇RN开发相关的技术文章www.jianshu.com/u/023338566… 欢迎小伙伴们：多多关注，多多点赞
• 做者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也按期更新最新的RN学习资料给你们，谢谢你们支持！

小伙伴们扫下方二维码加入RN技术交流QQ群