在刚开始使用RN的时候,很多人都会遇到这个问题,就是从A进入B,然后在B返回A的时候刷新A页面,但是因为RN滑动返回的时候是监听不到的。这里笔者有三个方式可以解决这个问题。
1.通过Navigation.route传参
在A进入B的时候通过路由将需要更新的方法传递给B,然后B在返回时调用传递过来的方法,即可实现对A的刷新。推荐使用场景:一个A页面对应一个B页面的情况下使用。这个方法虽然简单,但是在一个A页面对应多个B页面的时候就显的过于繁琐。
//A页面
//刷新页面函数
function Refresh(){
//刷新页面执行的方法
}
//点击跳转函数
onPress(()=>{
navigation.navigate("B", { FN:Refresh})
})
//B页面
//获取通过route传过来的刷新函数
const {FN}=route.params
function goBack(){
FN(); //执行刷新函数
navigation.goBack(); //返回上一级页面
}
2.通过https://reactnavigation.org/docs/use-focus-effectuseFocusEffect https://reactnavigation.org/docs/use-focus-effect事件实现。
官方介绍如下:
详细代码见下:
import { useFocusEffect } from '@react-navigation/native';//引入useFocusEffect hook
//调用异步方法刷新
useFocusEffect(
React.useCallback(() => {
let falg = true
const xxx= async () => {
// 需要执行的刷新方法
await function yyy(){}
}
xxx()
return () => {
falg = false
};
}, [])
);
这样就能够在返回当前页面的时候,刷新当前页面。
3.通过监听 Navigation events focus 事件实现
focus事件会在屏幕聚焦的时候被监听,即在第一次显示的时候被监听
代码如下:
useEffect(() => {
navigation.addListener('focus', () => {
//需要执行的刷新函数
xxx()
});
}, [])
这种刷新方式我认为是最简单好用的一种,当然以上操作都是基于 React Navigation来实现的。笔者这里使用的版本是React Navigation6.0x。