如何在react native中单击后退按钮后调用函数

Question

在我执行

navigation.goBack();

返回页面后，我想运行一个函数，我该怎么做？， 注意：如果我从 pageA 重定向到 pageB，我想在到达 pageB 后运行该函数，并且我还想解决使用物理后退按钮返回的问题

这是我尝试过的：

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


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

Answer 1

很好的问题，为此，您可以使用

useFocusEffect

每次您再次关注某个视图时，该钩子都会运行一次，从而允许您在 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)
      };
    }, [])
  );
};

拦截后退按钮事件：

为此，您可以简单地使用

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();
}, []);

我希望它对你有用！