如何在StackNavigator侧滑返回手势触发时调用函数？

完全可以实现这个需求，而且还能帮你把「自定义返回按钮」和「侧滑手势返回」的清理逻辑统一起来，不用重复写代码~

核心思路：利用React Navigation的beforeRemove事件 #

React Navigation提供了一个beforeRemove屏幕事件，它会在任何导致当前屏幕被移除的操作触发前执行——不管是你点击自定义返回按钮、侧滑手势返回，还是调用navigation.goBack()，甚至是安卓的系统返回键，都会触发这个事件。我们只需要把清理代码绑定到这个事件上，就能实现统一处理。

具体代码实现 #

下面是一个完整的示例，假设你用的是React Navigation 5.x及以上版本：

import { useNavigation } from '@react-navigation/native';
import { useCallback, useEffect } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

function YourTargetScreen() {
  const navigation = useNavigation();

  // 定义你的清理函数，比如取消订阅、清除定时器、重置状态等
  const cleanup = useCallback(() => {
    console.log('执行清理操作：比如取消网络请求、清除定时器');
    // 这里写你的实际清理逻辑
  }, []);

  // 监听beforeRemove事件
  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', (e) => {
      // 先执行清理代码
      cleanup();
      
      // 如果你的清理是异步操作（比如等待某个请求完成），可以这么改：
      // e.preventDefault(); // 先阻止默认返回行为
      // await cleanup();
      // navigation.dispatch(e.data.action); // 清理完成后再执行返回
    });

    // 组件卸载时移除监听，避免内存泄漏
    return unsubscribe;
  }, [navigation, cleanup]);

  // 自定义返回按钮的点击逻辑，现在只需要触发返回即可，清理交给beforeRemove处理
  const handleCustomBack = () => {
    navigation.goBack();
  };

  return (
    <View style={{ paddingTop: 50 }}>
      {/* 左上角的自定义返回按钮 */}
      <TouchableOpacity onPress={handleCustomBack} style={{ padding: 10 }}>
        <Text>← 返回</Text>
      </TouchableOpacity>
      
      {/* 你的页面其他内容 */}
      <Text>这是你的页面内容</Text>
    </View>
  );
}

export default YourTargetScreen;

为什么这个方案好用？ #

• 统一逻辑：不管是哪种返回方式，清理代码只需要写一次，避免重复维护
• 覆盖所有场景：侧滑、自定义按钮、系统返回键、编程式返回都能触发
• 支持异步清理：如果你的清理操作是异步的（比如保存数据到本地），可以通过阻止默认行为，等待异步完成后再执行返回

这样就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Richard McCluskey