React Native 返回上一个页面后执行刷新逻辑

本文介绍了一种在React Native中实现页面返回时自动刷新的方法。通过在页面A中注册监听器,当从页面B返回时,利用DeviceEventEmitter触发刷新事件,确保数据更新。此方案适用于需要在返回页面时进行数据同步的场景。

React Native 返回上一个页面后执行刷新逻辑

如题,在RN中,实现从页面A ->进入页面B,在页面B返回到页面A的时候,需要执行刷新逻辑。


代码实现思路:
在页面A中注册监听,当页面B销毁的时候(注意是销毁的时候,包括点击返回按钮、或者物理返回键),B页面通知A页面,A收到通知后,执行刷新逻辑即可。


代码实现参考

页面A

// 注册监听
componentWillMount() {
//监听从购物车返回
        this.backFromShopListener = bridge.addEventEmitterListener('TNBackFromShopNotification', () => {
            this._getHistoryJourneyData();
        });
}

// 移除监听
componentWillUnmount() {
        this.backFromShopListener && bridge.removeEventEmitterListener(this.backFromShopListener);
}

页面B

// 页面销毁时发送通知
componentWillUnmount() {
             DeviceEventEmitter.emit('TNBackFromShopNotification', {});
}

以上是一种实现思路,可以参考。如有其他的或者更好的方式,欢迎留言讨论,哈哈哈~~~~

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值