解决react-native中页面不刷新，再次进入页面，不走componentdidmount的问题

最新推荐文章于 2024-04-27 01:46:25 发布

原创最新推荐文章于 2024-04-27 01:46:25 发布 · 3.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react

js 专栏收录该内容

27 篇文章

订阅专栏

这篇博客介绍了两种在React Native中实现页面刷新的方法：一是利用`navigation`的`didFocus`回调；二是借助`DeviceEventEmitter`进行事件监听和触发。通过`didFocus`监听页面焦点变化以执行初始化逻辑，而`DeviceEventEmitter`则用于组件间的通信和数据刷新，例如在数据修改后触发页面刷新并传递更新信息。

方法一：使用navigation的didFocus函数

  componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener('didFocus', () => {
      this.pageInit();
      //处理自己进入路由的逻辑
    });
  }

方法二：使用react-native的DeviceEventEmitter 函数

1、需要刷新的页面


import { DeviceEventEmitter } from 'react-native';



  componentDidMount() {
    this.handleGetDetail();
    //设置监听，刷新页面
    this.listener = DeviceEventEmitter.addListener('refresh-VehicleGeneral', message => {
      //收到监听后想做的事情
      this.handleGetDetail();
    });
  }

2、修改数据后，触发上面改变的页面

    //调用接口保存
    let params = values;
    modifyVehicle(params).then(res => {
      if(res.status===200){
        Toast.success('保存成功');
        let vehicleInfo = res.body;
        const timeNow = new Date().getTime();
        DeviceEventEmitter.emit('refresh-VehicleGeneral', timeNow);
        DeviceEventEmitter.emit('refresh-VehicleList', timeNow);
        NavigationService.navigate('VehicleGeneral',vehicleInfo)
      }else{
        Toast.fail(res.msg);
      }
    });