按下后退按钮并打开抽屉时如何退出应用程序？

Question

目标是确保当抽屉打开并按下后退按钮时应退出应用程序而不是关闭抽屉。然而，问题是即使抽屉未打开，

BackHandler

也会触发。

const isDrawerOpen = useDrawerStatus()

useEffect(() => {
    console.log("Drawer opne status : ", isDrawerOpen)
}, [isDrawerOpen])


const backAction = () => {
    console.log("BackAction")
    if (true) {
    // if (isDrawerOpen === 'open') {
        console.log("DRAWER IS OPEN")
        BackHandler.exitApp();
        return true;
    }
    return false; 
};

useEffect(() => {
    const backHandler = BackHandler.addEventListener(
        'hardwareBackPress',
        backAction
    );
    return () => backHandler.remove();
}, [isDrawerOpen]); 

我还尝试使用

true

条件，这意味着无论抽屉的状态如何，应用程序都应该在按后退时退出，但即便如此，当抽屉打开时，按后退按钮仍然会关闭抽屉而不是退出应用程序。

Answer 1

在您共享的代码中，您将始终添加硬件后监听器，无论当前的

isDrawerOpen

值如何。这意味着即使抽屉关闭时也会调用处理程序。

我怀疑您至少有几种选择，以下是两种常见模式：

1. 仅在

   backAction

   为 true 时添加监听器和

   isDrawerOpen

   处理程序，并在关闭时将其删除。

   const isDrawerOpen = useDrawerStatus();
   
   useEffect(() => {
     if (isDrawerOpen) {
       const backAction = () => {
         BackHandler.exitApp();
         return true;
       };
   
       const backHandler = BackHandler.addEventListener(
         'hardwareBackPress',
         backAction
       );
   
       return () => {
         backHandler.remove();
       };
     }
   }, [isDrawerOpen]); 
   

2. 仅添加一次监听器和

   backAction

   处理程序，并将

   isDrawerOpen

   缓存在可在

   backAction

   处理程序中引用的 React 引用中。

   const isDrawerOpen = useDrawerStatus();
   
   const isDrawerOpenRef = useRef(isDrawerOpen);
   
   useEffect(() => {
     isDrawerOpenRef.current = isDrawerOpen;
   }, [isDrawerOpen]);
   
   useEffect(() => {
     const backAction = () => {
       if (isDrawerOpenRef.current === 'open') {
         BackHandler.exitApp();
         return true;
       }
       return false; 
     };
   
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
       backAction
     );
   
     return () => {
       backHandler.remove();
     };
   }, []);