2022-08-01 react-native 函数组件 利用hook来进行页面刷新

前言：这是针对由函数组件建立的页面逻辑来进行页面刷新，业务需求：页面B返回页面A，页面A进行刷新。

注意：我的这两个页面均为函数组件写的，不是用类组件写的。

页面B返回页面A代码：

navigation.navigate('note', { isRefresh: true });

这个我们给页面A传递了一个参数isRefresh，页面A刷新的逻辑就是监听页面捕获到的参数isRefresh来进行刷新，true就刷新，其余状态不刷新

页面A监听代码：

import { useFocusEffect } from '@react-navigation/native';
// 监听页面刷新
const PageListen = ({ onUpdate }) => {
  useFocusEffect(
    React.useCallback(() => {
      onUpdate();
      return () => {


      };
    }, [onUpdate])
  );



  return null;
}



  const _onUpdate = () => {
  // console.log("刷新！");
  // console.log(route.params)
  if (route.params != undefined) {
    if (route.params.isRefresh) {
      getData();
      navigation.navigate('note', { isRefresh: false });
    }
  }
}



　　render() {
  　　return (
    　　<View>
   　　   <PageListen onUpdate={_onUpdate} />
   　　 </View>
  )

注：PageListen可以不用写业务逻辑，业务逻辑放在下面的_onUpdate方法中，getData就是页面A获取数据的方法，我们的这个页面刷新方法的逻辑就是：

PageListen监听到有东西传递过来了，然后抓住这个东西，判断这个东西是否符合条件，符合了就加载getData方法，就等于是刷新页面了。

还有最后一点：判断完isRefresh后需要将其重置为不符合的条件，比如false，否则这个页面就会不断刷新不断刷新。。。

本文部分内容来至：https://www.jianshu.com/p/f584c0c406e3

除了这个useFocusEffect外还可以用DeviceEventEmitter这个方法来刷新，但是我笨学不会，哈哈。