解决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同样可以解决页面发布消息不实时更新的问题。

猜你喜欢

转载自blog.csdn.net/jinxi1112/article/details/78338668
今日推荐