Version: 7.x

防止返回

有时，你可能希望阻止用户离开屏幕，以避免丢失未保存的更改。在这种情况下，你可能需要做几件事：

¥Sometimes you may want to prevent the user from leaving a screen to avoid losing unsaved changes. There are a couple of things you may want to do in this case:

防止用户离开屏幕

¥Prevent the user from leaving the screen

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

¥The usePreventRemove hook allows you to prevent the user from leaving a screen. See the usePreventRemove docs for more details.

Previous approach

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

¥Previously, the way to do this was to:

覆盖标题中的后退按钮

¥Override the back button in the header
禁用向后滑动手势

¥Disable back swipe gesture
覆盖 Android 上的系统后退按钮/手势

¥Override system back button/gesture on Android

但是，使用钩子除了代码更少之外，还有许多重要的区别：

¥However, using the hook has many important differences in addition to being less code:

它不与任何特定按钮耦合，从自定义按钮返回也会触发它

¥It's not coupled to any specific buttons, going back from custom buttons will trigger it as well
它不与任何特定操作耦合，任何从状态中删除路由的操作都会触发它

¥It's not coupled to any specific actions, any action that removes the route from the state will trigger it
它适用于嵌套导航器，例如，如果由于父导航器中的操作而删除屏幕

¥It works across nested navigators, e.g. if the screen is being removed due to an action in the parent navigator
用户仍然可以在堆栈导航器中向后滑动，但是，如果阻止事件，滑动将被取消

¥The user can still swipe back in the stack navigator, however, the swipe will be canceled if the event is prevented
可以继续触发事件的相同操作

¥It's possible to continue the same action that triggered the event

防止用户离开应用

¥Prevent the user from leaving the app

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

¥To be able to prompt the user before they leave the app on Android, you can use the BackHandler API from React Native:

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 事件在用户离开浏览器选项卡之前提示用户：

¥On the Web, you can use the beforeunload event to prompt the user before they leave the browser tab:

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 上离开应用。我们建议保留数据并在再次打开应用时恢复数据，而不是在用户离开应用之前提示用户。

¥The user can still close the app by swiping it away from the app switcher or closing the browser tab. Or the app can be closed by the system due to low memory or other reasons. It's also not possible to prevent leaving the app on iOS. We recommend persisting the data and restoring it when the app is opened again instead of prompting the user before they leave the app.

防止用户离开屏幕​

防止用户离开应用​

防止用户离开屏幕

防止用户离开应用