Перехватить событие назад в приложении реакции, чтобы подтвердить сохранение - PullRequest
Новая
       17

Перехватить событие назад в приложении реакции, чтобы подтвердить сохранение

1 голос
/ 05 июня 2019

Я создаю собственное приложение с использованием expo.io.

Приложение использует Навигатор стека для перемещения между страницами (карточками).

Моя проблема в том, что у меня есть одна страница, где пользователи могут создавать новые элементы, и я хочу сохранить элементы, когда они покидают страницу. Вместо того, чтобы сохранять все свои изменения, я хочу попросить пользователя, если они хотят сохранить изменения, перед тем как покинуть страницу, чтобы у них была возможность отменить все внесенные изменения.

Мне не удалось найти событие для выхода из страницы, к которому я могу подключиться, и предложить пользователю, хотят ли они сохранить свои изменения? Самое близкое к тому, что я хочу сделать, - это backhandler , но это работает только для кнопки возврата Android.

Есть ли способ сделать что-то подобное, если пользователь вернется назад с помощью кнопки возврата в заголовке карты или если он использует жест смахивания?

1 Ответ

1 голос
/ 05 июня 2019

Использование 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;
};

Демо

...