Блог

С Android…когда вы проводите пальцем вправо по приложению, оно размонтирует все компоненты и прекратит все операции приложения. Первым размонтируемым компонентом, по-видимому, является родительский набор компонентов (обычно именуемый app.js)…..пожалуйста, поправьте меня, если я ошибаюсь в этом.

Когда это произойдет..Я знаю, что событие componentWillUnmount срабатывает, когда я добавил приведенный ниже код, который регистрируется в консоли.

   componentWillUnmount() {
    console.log('app.js....componentWillUnmount');
  }
 

Мой вопрос в том, могу ли я добавить какой-нибудь дополнительный код, componentWillUnmount который мог Alert бы спросить пользователя: «Вы уверены, что хотите выйти из приложения?»….и дайте им возможность сказать «нет» и сохранить приложение в актуальном состоянии.

В BackHandler описании API в официальных документах React-Native приведен пример для того же варианта использования. Вы можете взглянуть на приведенный пример фрагмента кода в официальных документах и выбрать пример с функциональным или классовым компонентом по вашему выбору.

Вы можете разместить этот код в компоненте верхнего уровня, например App.js , или Routes.js .

Другим подходом к тосту с автогидом может быть:

Использование функционального компонента

 import React, {useEffect, useRef} from 'react';
import {Text, SafeAreaView, BackHandler, ToastAndroid} from 'react-native';

export default function App() {
  const doubleBackToExitPressedOnce = useRef(false);

  useEffect(() => {
    const backAction = () => {
      if (doubleBackToExitPressedOnce.current) {
        BackHandler.exitApp();
        return true;
      }

      ToastAndroid.show('Press back again to exit', ToastAndroid.SHORT);
      doubleBackToExitPressedOnce.current = true;
      setTimeout(() => {
        doubleBackToExitPressedOnce.current = false;
      }, 2000);
      return true;
    };

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

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

  return (
    <SafeAreaView>
      <Text>Hello world!</Text>
    </SafeAreaView>
  );
}
 

Использование компонента класса:

 import React, {Component} from 'react';
import {SafeAreaView, Text, BackHandler, ToastAndroid} from 'react-native';

export default class App extends Component {
  backAction = () => {
    if (this.doubleBackToExitPressedOnce) {
      BackHandler.exitApp();
    }
    ToastAndroid.show('Press back again to exit', ToastAndroid.SHORT);
    this.doubleBackToExitPressedOnce = true;
    setTimeout(() => {
      this.doubleBackToExitPressedOnce = false;
    }, 2000);
    return true;
  };

  componentDidMount() {
    this.doubleBackToExitPressedOnce = false;
    this.backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      this.backAction,
    );
  }

  componentWillUnmount() {
    this.backHandler.remove();
  }

  render() {
    return (
      <SafeAreaView>
        <Text>Hello world!</Text>
      </SafeAreaView>
    );
  }
}