时间戳

首页 > 解决方案 > 在反应应用程序中拦截返回事件以确认保存

reactjs - 在反应应用程序中拦截返回事件以确认保存

问题描述

我正在使用 expo.io 构建一个反应原生应用程序。

该应用程序使用堆栈导航器在页面（卡片）之间移动。

我的问题是我有一个页面，用户可以在其中创建新项目，并且我想在他们离开页面时保存这些项目。我不想保存所有更改，而是想在离开页面之前提示用户是否要保存更改，以便他们有机会放弃所做的任何更改。

我无法找到退出页面的事件，我可以连接并提示用户是否要保存更改？我发现最接近我想做的是在backhandler中，但这仅适用于 Android 后退按钮。

如果用户使用卡片标题中的后退按钮返回，或者他们使用滑动手势，有没有办法做类似的事情？

标签： reactjsreact-nativereact-navigationexpo

解决方案

使用NavigationEvents。将事件侦听器添加到您的组件。

onWillFocus - 事件监听器

onDidFocus - 事件监听器

onWillBlur - 事件监听器

onDidBlur - 事件监听器

例如，下一个屏幕聚焦时会触发以下内容。在另一个屏幕中，将用户的更改保存在临时存储中，当他们导航回来时，获取那些未保存的更改并提示用户是否要保存。

focusSubscription = null;

onWillFocus = (payload) => {

  if (payload && payload.action && payload.action.type && payload.action.type === 'Navigation/BACK') {

    // get values from storage here
    // if there were unsaved changes prompt the user if they want to those changes or not
  }
};

componentDidMount = () => {

  this.focusSubscription = this.props.navigation.addListener(
    'willFocus',
    this.onWillFocus,
  );
 }

componentWillUnmount = () => {
  this.focusSubscription && this.focusSubscription.remove();
  this.focusSubscription = null;
};

演示

推荐阅读