Merge pull request #926 from thundersdata-frontend/rn-issue

fix: 修复Toast组件导致物理返回键无法正常使用的bug
thundersdata-frontend · Jan 16, 2025 · cb8aa44 · cb8aa44
2 parents 38e1e60 + 539c123
commit cb8aa44
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/.changeset/cyan-owls-glow.md b/.changeset/cyan-owls-glow.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+修复Toast组件导致物理返回键无法正常使用的bug
diff --git a/packages/react-native/src/toast/useToast.ts b/packages/react-native/src/toast/useToast.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { BackHandler } from 'react-native';
+import { BackHandler, NativeEventSubscription } from 'react-native';
 
 import { useMemoizedFn } from '@td-design/rn-hooks';
 
@@ -45,11 +45,14 @@ export default function useToast() {
 
   /** 当Toast显示的时候，不允许安卓物理返回键可用 */
   useEffect(() => {
-    BackHandler.addEventListener('hardwareBackPress', () => visible);
+    let backHandler: NativeEventSubscription | undefined;
+    if (visible) {
+      backHandler = BackHandler.addEventListener('hardwareBackPress', () => true);
+    } else {
+      backHandler?.remove();
+    }
 
-    return () => {
-      BackHandler.removeEventListener('hardwareBackPress', () => false);
-    };
+    return () => backHandler?.remove();
   }, [visible]);
 
   return {