如何在react-navigation中实现类似onBeforeUnload的返回确认弹窗？

我之前做项目时也碰到过这个需求——网页端能用onBeforeUnload弹出未保存数据的确认提示，但React Navigation官方文档里确实没有直接对应的API。你提到的hack思路其实是可行的，而且算不上违规，本质是用官方提供的事件监听API组合实现需求，下面我把完整的方案和注意事项整理出来：

针对React Navigation 4及以下版本的实现方案 #

import React, { Component } from 'react';
import { StackNavigator, BackHandler, Alert, Platform } from 'react-native';

export default function ConfirmBackStackNavigator(routes, options) {
  const StackNav = StackNavigator(routes, options);

  return class extends Component {
    componentDidMount() {
      // 监听Android硬件返回按钮
      if (Platform.OS === 'android') {
        this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
      }
      // 监听导航页面即将失焦的事件
      this.navigationListener = this.props.navigation.addListener('willBlur', this.handleWillBlur);
    }

    componentWillUnmount() {
      // 清理监听，避免内存泄漏
      if (this.backHandler) this.backHandler.remove();
      if (this.navigationListener) this.navigationListener.remove();
    }

    handleBackPress = () => {
      return this.showConfirmDialog();
    };

    handleWillBlur = (payload) => {
      // 只针对返回操作触发提示，排除跳转到其他页面的情况
      if (payload.action.type === 'Navigation/BACK') {
        if (!this.showConfirmDialog()) {
          // 用户取消返回时，阻止默认导航行为
          payload.preventDefault();
        }
      }
    };

    showConfirmDialog = () => {
      // 这里替换成你的实际未保存数据判断逻辑
      const hasUnsavedData = true;
      if (!hasUnsavedData) return true;

      Alert.alert(
        '提示',
        '存在未保存数据，确定要返回吗？',
        [
          { text: '取消', onPress: () => {}, style: 'cancel' },
          { text: '确定', onPress: () => this.props.navigation.goBack() },
        ],
        { cancelable: false }
      );
      // 返回false表示暂时阻止默认返回，等待用户选择
      return false;
    };

    render() {
      return <StackNav {...this.props} />;
    }
  };
}

方案合规性说明 #

这个方案完全基于React Navigation和React Native的官方公开API，算不上“违规hack”：

• willBlur是React Navigation提供的导航生命周期事件，用来监听页面即将失去焦点的状态
• BackHandler是React Native官方提供的硬件返回按钮监听API
• 只是把这两个API结合，加上确认弹窗逻辑，实现了类似onBeforeUnload的效果

针对React Navigation 5+的优化方案（函数式组件） #

如果是用新版的React Navigation，推荐用hooks实现，代码更简洁：

import { useNavigation, useFocusEffect } from '@react-navigation/native';
import { BackHandler, Alert } from 'react-native';

// 自定义hooks，复用确认返回逻辑
function useConfirmBack(hasUnsavedData) {
  const navigation = useNavigation();

  useFocusEffect(
    React.useCallback(() => {
      // 处理Android硬件返回
      const handleBackPress = () => {
        if (!hasUnsavedData) return false;
        Alert.alert(
          '提示',
          '存在未保存数据，确定要返回吗？',
          [
            { text: '取消', onPress: () => {}, style: 'cancel' },
            { text: '确定', onPress: () => navigation.goBack() },
          ],
          { cancelable: false }
        );
        return true;
      };

      // 处理导航栏返回/页面跳转的返回操作
      const navigationListener = navigation.addListener('beforeRemove', (e) => {
        if (!hasUnsavedData) return;
        // 先阻止默认的返回行为
        e.preventDefault();
        Alert.alert(
          '提示',
          '存在未保存数据，确定要返回吗？',
          [
            { text: '取消', onPress: () => {}, style: 'cancel' },
            { text: '确定', onPress: () => navigation.dispatch(e.data.action) },
          ],
          { cancelable: false }
        );
      });

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

      // 组件卸载时清理监听
      return () => {
        backHandler.remove();
        navigationListener.remove();
      };
    }, [hasUnsavedData, navigation])
  );
}

// 在页面组件中使用
function EditPage() {
  const [hasUnsavedData, setHasUnsavedData] = React.useState(false);
  
  // 调用自定义hooks
  useConfirmBack(hasUnsavedData);

  return (
    // 页面内容...
  );
}

关键注意事项 #

1. 区分返回和跳转：一定要判断导航事件的类型，避免用户跳转到其他页面时也弹出提示
2. 异步弹窗处理：弹窗是异步的，所以要先阻止默认返回，等用户确认后再手动触发返回
3. 内存泄漏：组件卸载时一定要移除所有监听事件，避免内存泄漏
4. iOS导航栏返回按钮：iOS没有硬件返回按钮，新版React Navigation用beforeRemove事件可以覆盖导航栏返回的情况，旧版本需要自定义导航栏的返回按钮组件

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