Ionic + React：单击硬件上的后退按钮后退出应用程序

Question

我正在使用 Ionic 和 React 来开发应用程序。我找不到任何有关如何处理硬件后退按钮单击以及如何退出应用程序的文档。有相关的文档或教程吗？

Answer 1

在 App.tsx 文件中导入这些

import React, { useEffect } from "react";
import { Plugins, Capacitor } from "@capacitor/core";

创建处理返回按钮的效果

useEffect(() => {
    if (Capacitor.isNative) {
      Plugins.App.addListener("backButton", (e) => {
        if (window.location.pathname === "/") {
          // Show A Confirm Box For User to exit app or not
          let ans = window.confirm("Are you sure");
          if (ans) {
            Plugins.App.exitApp();
          } 
        } else if (window.location.pathname === "/YourFirstPageRoute") {
           // Show A Confirm Box For User to exit app or not
          let ans = window.confirm("Are you sure");
          if (ans) {
            Plugins.App.exitApp();
          } 
        } 
      });
    }
  }, []);

Answer 2

要在硬件上单击返回按钮后退出应用程序，首先您必须阻止默认历史记录返回。 https://ionicframework.com/docs/react/config

// App component
import { setupConfig } from '@ionic/react'

setupConfig({
  hardwareBackButton: false
})

然后添加 Listener 后退按钮

https://capacitor.ionicframework.com/docs/apis/app#method-addListener-3

import { Plugins, Capacitor } from '@capacitor/core'

  ...

  useEffect(() => {
    if (Capacitor.isNative) {
      Plugins.App.addListener('backButton', e => {
           // Use of location.pathname is also correct
        if (window.location.pathname === '/') {
          Plugins.App.exitApp()
        } else if (window.location.pathname === '/detail') {
          history.push('/')
        } else {
          history.back()
        }
      })
    }
  }, []) // eslint-disable-line
...

Answer 3

好吧，您可以在退出前在主/主页/仪表板页面上发出确认警报。 我添加了带有 2 个按钮的 IonAlert。 请在下面的实际设备中查看我的工作代码：

import React, {useState } from 'react';
import { IonAlert } from '@ionic/react';
import { Plugins } from "@capacitor/core";

const HomePage: React.FC = () => {
  const { App } = Plugins;
  const [showBackAlert, setShowBackAlert] = useState(false);

 // listening to ionic back button event
 document.addEventListener('ionBackButton', (ev: any) => {
    ev.detail.register(-1, () => {
      // when you are in your home(last) page
      if (history.location.pathname === '/home') {
        // calling alert box
        setShowBackAlert(true);
      }
    });
  });

return (
    <IonPage>
       <IonAlert
          isOpen={showBackAlert}
          header={'Please Confirm!'}
          message={'Do you really want to exit our App?'}
          buttons={[
            {
              text: 'Nope',
              role: 'cancel',
              cssClass: 'secondary',
              handler: () => {}
            },
            {
              text: 'Yeah',
              handler: () => {
                App.exitApp();
              }
            }
          ]}
          onDidDismiss={() => setShowBackAlert(false)}
          cssClass='my-custom-class'
        />
 </IonPage >
  );
};

export default HomePage;