最近做一个项目,在首页底部导航采用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同样可以解决页面发布消息不实时更新的问题。