Reactnative 如何在Recact Native中单击Back按钮后调用函数

发布于01月09日

当我做了navigation.goBack();次回到一个页面后，我想运行一个函数，我该怎么做？注意:如果我从页面A重定向到页面B，我想在到达页面B后运行该函数，并且我还想使用物理返回按钮返回

这就是我try 过的:

 <TouchableOpacity
     onPress={() => {
     navigation.goBack();
     }}>
     <Ionicons
     name="chevron-back-outline"
     size={24}
     color="#000"
     style={{}}
   />
 </TouchableOpacity>
//this is pageA


  useEffect(()=>{
    getUserInfo()
  })
//on pageB

推荐答案

很好的问题，为此，您可以使用useFocusEffectThis钩子，每次您再次将注意力放在一个视图上时运行一次，允许您在GoBack函数生效后执行一些代码.

import { useFocusEffect } from '@react-navigation/native';

const PageB = () => {
  // ... other code for pageB
  useFocusEffect(
    React.useCallback(() => {
      getUserInfo();
      // Return a cleanup function if necessary
      return () => {
        // Cleanup code (if needed)
      };
    }, [])
  );
};

Intercepting Backbutton event:个

为此，您可以简单地使用BackHandler事件侦听器:

import { BackHandler } from 'react-native';

useEffect(() => {
  const backAction = () => {
    getUserInfo();
    return true;  // Prevent default behavior (optional)
  };

  const backHandler = BackHandler.addEventListener(
    'hardwareBackPress',
    backAction
  );

  return () => backHandler.remove();
}, []);

我希望它对你有用！