react-navigation 监听页面显隐(viewDidAppear viewDidDisappear)

我们经常遇到的需求就是,当某个界面出现的时候,就刷新一下此界面的数据 保证用户的数据处于一种相对同步的情况

在 iOS 中 viewDidAppear 在界面出现的时候总是会执行一次

如此只需要在 viewDidAppear 中加上网络请求即可

react-navigation 中如何实现呢

首先请升级 react-navigation 到最新版本,因为此监听方法是较新版本才更新出来的方法

官方链接

官网摘抄

willBlur - the screen will be unfocused
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
didBlur - the screen unfocused (if there was a transition, the transition completed)

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

viewDidAppear navigation.addListener didFocus

如下代码:

componentDidMount() {

        // 添加监听
        this.viewDidAppear = this.props.navigation.addListener(
            'didFocus',
            (obj)=>{
                console.log(obj)
            }
        )
    }

    componentWillUnmount() {
        // 移除监听
        this.viewDidAppear.remove();
    }

相信看了如上方法或者官方文档,使用起来是相当简单了

这里略作补充

如上方法添加了监听后

  1. 导航控制下,此界面出现调用此方法
  2. 在 tabBar 切换的时候也是能够准确的调用此方法
  3. 此监听只是监听当前界面的(亲测,放心使用)

所以只要添加了监听,万事大吉

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

2018最新款渗透测试框架 | Fsociety搞定各种姿势脚本

Fsociety是一款最新的渗透测试框架,可以帮助各位兄弟在安全测试过程中拥有变身成黑客所需要的各种姿势脚本。 这个工具刚刚出现,目前大概分为以下9类,后续还会...

3418
来自专栏大数据实战演练

ambari的服务启动顺序如何设置

角色是组件的另一个名称(例如:NAMENODE,DATANODE,RESOURCEMANAGER,HBASE_MASTER等)。 顾名思义,可以告诉Ambari...

3512
来自专栏禁心尽力

SpringBoot整合Mybatis之进门篇

已经有好些日子没有总结了,不是变懒了,而是我一直在奋力学习springboot的路上,现在也算是完成了第一阶段的学习,今天给各位总结总结。        之前...

1.5K6
来自专栏耕耘实录

Linux(Centos7.4和RHEL7.4)环境下基于chrony的NTP服务器的构建

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

1151
来自专栏极客日常

对比Kubernetes的Nodeport、Loadbalancer和Ingress,什么时候该用哪种

最近,有人问我 NodePort,LoadBalancer 和 Ingress 之间的区别是什么。 它们是将外部流量引入群集的不同方式,并且实现方式不一样。 我...

3012
来自专栏岑玉海

oozie 运行demo

昨晚装好了oozie,能启动了,并且配置了mysql作为数据库,好了,今天要执行oozie自带的demo了,好家伙,一执行就报错!报错很多,就不一一列举了,就...

4388
来自专栏Gaussic

使用IntelliJ IDEA开发SpringMVC网站(四)用户管理 顶

访问GitHub下载最新源码:https://github.com/gaussic/SpringMVCDemo

2032
来自专栏JMCui

Spring消息之WebSocket

2023
来自专栏技术翻译

RabbitMQ在微服务中

RabbitMQ,也称为开源消息代理,支持多种消息协议,可以部署在分布式系统上。它非常轻巧,可以轻松部署应用程序。它主要作为一个队列,首先可以对输入的消息进行操...

2840
来自专栏代码拾遗

SpringMVC 教程 - WebSocket

WebSocket提供了在客户端和服务端通过单一TCP连接建立全双工双向通信的通道。它是和HTTP不同的TCP协议,但是却建立在HTTP之上,使用80,443端...

2092

扫码关注云+社区

领取腾讯云代金券