Ionic：打开模式时不执行硬件后退按钮事件侦听器

Question

在 ionic 框架中，当按下硬件后退按钮时，将执行以下事件侦听器方法。

document.addEventListener('ionBackButton', (ev) => {
   ev.detail.register(10, () => {
   console.log('Handler was called!');
 });
});

但是当模态一直打开时，按下硬件后退按钮后不会执行上述方法。它仅在 android studio

的控制台上显示以下消息

Notifying listeners for event backButton

已更新：

以下代码用于离子反应中的模态

import React, { useState } from 'react';
import { IonModal, IonButton, IonContent } from '@ionic/react';

export const ModalExample: React.FC = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <IonContent>
      <IonModal isOpen={showModal} cssClass='my-custom-class'>
        <p>This is modal content</p>
        <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
      </IonModal>
      <IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
    </IonContent>
  );
};

Answer 1

我找到了触发硬件后退按钮事件侦听器方法的解决方案，只需将优先级提高到 140 即可。

document.addEventListener('ionBackButton', (ev) => {
   ev.detail.register(140, () => {
   console.log('Handler was called!');
 });
});

Ionic：打开模式时不执行硬件后退按钮事件侦听器

Ionic : Hardware Back Button Event Listener not executed when modal is open

reactjs

ionic-framework

capacitor