React Native App - 向右滑动意味着所有组件卸载......这可以停止吗？

Question

使用 Android...当您在应用程序上向右滑动时，它将卸载所有组件并停止所有应用程序操作。第一个要卸载的组件似乎是父组件（通常命名为 app.js）.....如果我错了，请纠正我。

发生这种情况时..我知道 componentWillUnmount 事件会触发，因为我在下面添加了记录到控制台的代码。

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

我的问题是我是否可以在 componentWillUnmount 中添加一些额外的代码，可以 Alert 用户“你确定要退出应用程序吗？”......并给他们一个选择所以说“不”并保持应用程序运行

Answer 1

React-Native 官方文档上的 BackHandler API description 有相同用例的示例。您可以查看官方文档中给定的示例代码片段，并根据您的选择选择带有功能组件或基于 class 的组件的示例。

您可以将该代码放在顶层组件中，例如 App.js 或 Routes.js。

自动隐藏 toast 的另一种方法是：

使用功能组件

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>
  );
}

使用 class 组件：

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>
    );
  }
}

React Native App - 向右滑动意味着所有组件卸载......这可以停止吗？

React Native App - swipe right means all componenets unmount....can this be stopped?

react-native

react-native-android

使用功能组件

使用 class 组件：