解决react-native的Navigator跳转不刷新页面的问题

最近做一个项目,在首页底部导航采用Navigator的跳转机制,发现点击底部导航,首页并不重新渲染,可以采用DeviceEventEmitter解决:

1.找到..\node_modules\react-navigation\src\createNavigationContainer.js文件

在头部引入DeviceEventEmitter

import { DeviceEventEmitter } from 'react-native';

_onNavigationStateChange方法中加入

if (console.group) {
          console.group('Navigation Dispatch: ');
          console.log('Action: ', action);
          console.log('New State: ', nav);
          console.log('Last State: ', prevNav);
          console.groupEnd();
          //在此注册监听事件 
          DeviceEventEmitter.emit('userNameDidChange', '需要传递的参数');
          ...

2.在首页调用,注意在组件销毁时将其移除:

componentDidMount() {
        //调用事件通知,param是传递过来的参数
        DeviceEventEmitter.addListener('userNameDidChange',(param)=>{
            //点击底部导航按钮后首页执行的操作,比如发送数据请求或刷新页面
            alert(param);
            this.forceUpdate();//强制刷新页面
        });
    }

componentWillUnmount() {
        //在组件销毁的时候要将其移除
        DeviceEventEmitter.remove();
    }

采用DeviceEventEmitter同样可以解决页面发布消息不实时更新的问题。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值