阻止返回

有时您可能希望阻止用户离开屏幕以避免丢失未保存的更改。在这种情况下，您可以执行以下几项操作

阻止用户离开屏幕

usePreventRemove Hook 允许您阻止用户离开屏幕。 有关更多详细信息，请参阅 usePreventRemove 文档。

以前的方法

以前，执行此操作的方法是

• 重写标题中的后退按钮
• 禁用后退滑动手势
• 重写 Android 上的系统后退按钮/手势

然而，除了代码更少之外，使用 Hook 还有许多重要的区别

• 它不与任何特定按钮耦合，从自定义按钮返回也会触发它
• 它不与任何特定操作耦合，任何从状态中删除路由的操作都会触发它
• 它跨嵌套导航器工作，例如，如果屏幕由于父导航器中的操作而被删除
• 用户仍然可以在堆栈导航器中向后滑动，但是，如果阻止了该事件，则滑动将被取消
• 可以继续触发事件的同一操作

阻止用户离开应用

为了能够在用户离开 Android 上的应用之前提示用户，您可以使用 React Native 的 BackHandler API

import { Alert, BackHandler } from 'react-native';

// ...

React.useEffect(() => {
  const onBackPress = () => {
    Alert.alert(
      'Exit App',
      'Do you want to exit?',
      [
        {
          text: 'Cancel',
          onPress: () => {
            // Do nothing
          },
          style: 'cancel',
        },
        { text: 'YES', onPress: () => BackHandler.exitApp() },
      ],
      { cancelable: false }
    );

    return true;
  };

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

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

在 Web 上，您可以使用 beforeunload 事件在用户离开浏览器选项卡之前提示用户

React.useEffect(() => {
  const onBeforeUnload = (event) => {
    // Prevent the user from leaving the page
    event.preventDefault();
    event.returnValue = true;
  };

  window.addEventListener('beforeunload', onBeforeUnload);

  return () => {
    window.removeEventListener('beforeunload', onBeforeUnload);
  };
}, []);

警告

用户仍然可以通过从应用切换器中滑动或关闭浏览器选项卡来关闭应用。或者应用可能由于内存不足或其他原因而被系统关闭。在 iOS 上也无法阻止离开应用。我们建议持久化数据并在再次打开应用时恢复数据，而不是在用户离开应用之前提示用户。