Ionic React“硬件后退按钮”关闭模式但导航回应用程序的根目录

Question

我正在尝试在我的项目中使用原生 Android 后退按钮关闭模式。下面的代码关闭了模式，但导航回项目的根目录。

 document.addEventListener('backbutton', (event) => {
            if(modalIsOpen === true) {
                setIsOpen(false);
                event.preventDefault();
            } 
            else if(modalIsOpen === false && history.location.pathname === "/tabs/home"){
           App.exitApp();
            }
        });

我的另一个解决方案是使用电容器应用插件

const ionRouter = useIonRouter();
     document.addEventListener('ionBackButton', (ev) => {
         ev.detail.register(-1, () => {
             if (modalIsOpen === true) {
                 setIsOpen(false);
                 event.preventDefault();
             }
             else if (modalIsOpen === false && !ionRouter.canGoBack()) {
                 App.exitApp();
             }
         });
     });

两者都没有按照我希望的方式工作，并且真的很想弄清楚这一点！我还尝试使用history.push(); 推送到模式关闭的页面，以停止导航回到根目录，但不适用于所有页面。

任何帮助将不胜感激。

Answer 1

后退按钮事件可能还有其他事件侦听器。您可以尝试使用事件捕获：

addEventListener('backbutton', () => { … }, { capture: true });

我还建议将 event.preventDefault() 移到回调的开头。