美文网首页React-Native开发从入门到实战项目总结
react-native-router-flux组件实战详解(一

react-native-router-flux组件实战详解(一

作者: 光强_上海 | 来源:发表于2017-11-20 17:28 被阅读1114次

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)
  • 作者简书主页:包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们:多多关注多多点赞)
  • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢支持!

相关文章

网友评论

本文标题:react-native-router-flux组件实战详解(一

本文链接:https://www.haomeiwen.com/subject/cvovvxtx.html