RN 滑动返回刷新页面

在刚开始使用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事件实现。

官方介绍如下：

useFocusEffect ​

详细代码见下：

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。