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系列》22、 Flux框架Demo详解

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

react native使用原生模块

有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线程的代码...
  • mockingbirds
  • mockingbirds
  • 2016年01月31日 16:07
  • 3336

React-Native中navigator.pop()后如何更新前一个页面

1、问题提出React-Native中navigator.pop()后如何更新前一个页面,这是一个最为常见得问题。2、问题的描述比如说,我们开发应用的时候,上传头像是一个最为常见的功能,我点击选择打开...
  • u010046908
  • u010046908
  • 2016年09月06日 21:28
  • 7371

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

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

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

页面跳转与传值 1. 正向跳转 2. 正向跳转并传值 3. 反向跳转 4. 反向跳转并传值 5. 指定页面跳转 6. 指定页面跳转并传值...
  • fsf_snail
  • fsf_snail
  • 2017年05月02日 14:16
  • 7047

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

react-native demo使用flux思想进行重构
  • szy406469533
  • szy406469533
  • 2017年05月02日 12:18
  • 354

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

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

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

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

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

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

React全栈 Redux Flux webpack Babel整合开发 [张轩著][电子工业出版社]

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

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