react-native-router-flux(一)

原创 2016年08月31日 09:35:08

for

在采用了redux的项目中实现navigator的跳转。采用 react-native-router-flux +redux

explain
  • 在Route标签中的component属性将redux加入组件中,
  • 在Router标签中Connect a to redux
    triggeractions
    Actions.BEFORE_ROUTE
    Actions.AFTER_ROUTE
    Actions.AFTER_POP
    Actions.BEFORE_POP
    Actions.AFTER_DISMISS
    Actions.BEFORE_DISMISS

  • 在reducer中state.set(‘currentRoute’,action.name)

  • update you component on focus

    componentDidUpdate(prevProps) {
        const prevRoute = prevProps.global.currentRoute
        const currentRoute = this.props.global.currentRoute
        if (currentRoute === 'payment' && prevRoute !== currentRoute) {
          this.props.actions.doSomething()
        }
      }

ref

http://stackoverflow.com/questions/35140116/accessing-navigator-in-actions-with-react-native-and-redux


last update 2016-08-31

版权声明:欢迎评论、补充;24小时内回复;及时更新;欢迎转载。

相关文章推荐

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

个人主页:欢迎一起分享 链接:http://cherylgood.cn/20170228/44   1、react-native-router-flux 是一个路由包 特性: 在一个中心区域...
  • jiecsdn
  • jiecsdn
  • 2017年02月28日 20:53
  • 1267

ReactNative React-native-router-flux框架---页面跳转与传值

页面跳转与传值 1. 正向跳转 2. 正向跳转并传值 3. 反向跳转 4. 反向跳转并传值 5. 指定页面跳转 6. 指定页面跳转并传值...

《React-Native系列》22、 Flux框架Demo详解

今天我们来结合一个简单的Demo来讲解Flux框架,让大家了解Flux框架的真面目。 先上一张比较漂亮的图(对漂亮的图,总是没有抵抗力:-) )。 我们再来回顾下Flux框架的四大组成...

《React-Native系列》20、 RN数据流之Flux概览

今天我们来看下ReactNative的数据流框架Flux。 Flux是Facebook用来构建用户端的web应用的应用程序体系架构。它通过利用数据的单向流动为React的可复用的视图组件提供了补充。...

React-Native Flux思想的学习与重构

react-native demo使用flux思想进行重构

React Native探索(五):使用Flux搭建React应用程序架构

前面几篇文章介绍了React相关的基本概念和运行原理,可以看到React是一个完全面向View的解决方案,它让我们能以一 种新的思路去实现View,让很多复杂的场景可以用一种简单的方法去解决。然而在一...

说说React,Flux,Reray和GraghQL

今天看到同事转发的《ReactEurope Conf 参会感想》,这篇文章讲的react的一些理念感觉有些道理,但我对react最终能很好的实现learn once, write everywhere...
  • offbye
  • offbye
  • 2015年07月16日 18:35
  • 1797

react-flux-simple-example

  • 2017年02月04日 16:18
  • 38KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react-native-router-flux(一)
举报原因:
原因补充:

(最多只允许输入30个字)