React Native底部tab切换刷新机制_reactnative tab.screen切换时通知-CSDN博客

本文介绍了如何在React Native应用中，通过DeviceEventEmitter实现从个人中心B到首页A的页面刷新通知机制，确保用户在B页面操作后A页面数据自动更新，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求

react-native底部tab有两个单元，首页A和个人中心B；首次加载tab A和tab B的时候，页面都会刷新，但是之后的切换操作都不会进行页面刷新。
现需要在个人中心B进行相关操作后，点击首页A，A页面中的数据也需要刷新过来

二、解决

DeviceEventEmitter刷新机制：利用DeviceEventEmitter在RN内的发送和接受需要刷新的动作。
B页面操作决定A页面刷新，B页面发送通知，A页面接收通知
1、B页面：发送通知

//发送通知
DeviceEventEmitter.emit('action', '通知来了');//两个参数分别为：通知名称，通知内容或携带参数

2、A页面：接收通知

import  {DeviceEventEmitter} from 'react-native';
constructor (props) {
    super(props);
    this.state = {};
    this.listener=null;
}
//注册这个监听事件
componentDidMount(){
  this.listener=DeviceEventEmitter.addListener('action',()=>{//（）中为携带参数，可以为空
  		//调接口……刷新页面
  });
};
//在组件销毁的时候要将其移除
componentWillUnmount(){
    this.listener.remove();
};