From f61c08970b7f7c5b83fe821c3e966cfe31216a4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= <chj_0507_dz@sina.com>
Date: Tue, 3 Sep 2024 10:15:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=AD=90=E7=BB=84=E4=BB=B6=E5=86=85=E6=97=A0=E6=B3=95=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E5=BC=B9=E7=AA=97=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/hip-worms-hide.md                  |  5 +++++
 .../react-native/src/modal/show/index.tsx     | 20 ++++++++++++++-----
 packages/react-native/src/modal/type.ts       |  5 +++++
 3 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/hip-worms-hide.md

diff --git a/.changeset/hip-worms-hide.md b/.changeset/hip-worms-hide.md
new file mode 100644
index 0000000000..91dcf8dcd1
--- /dev/null
+++ b/.changeset/hip-worms-hide.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+fix: 修复弹窗子组件内无法关闭弹窗的bug
diff --git a/packages/react-native/src/modal/show/index.tsx b/packages/react-native/src/modal/show/index.tsx
index 66c171f5f7..556ea0d563 100644
--- a/packages/react-native/src/modal/show/index.tsx
+++ b/packages/react-native/src/modal/show/index.tsx
@@ -1,13 +1,13 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 
 import { useSafeState } from '@td-design/rn-hooks';
 
 import Portal from '../../portal';
 import ModalView from '../Modal/ModalView';
-import { ModalProps } from '../type';
+import { ImperativeModalChildrenProps, ModalProps } from '../type';
 
 export default function show(
-  comp: React.ReactElement,
+  comp: React.ReactElement<ImperativeModalChildrenProps<{}>>,
   props?: Omit<ModalProps, 'onAnimationEnd' | 'visible' | 'onClose'>
 ) {
   const key = Portal.add(
@@ -24,7 +24,10 @@ export default function show(
   );
 }
 
-const ModalContent = ({ children, ...props }: PropsWithChildren<Omit<ModalProps, 'visible' | 'onClose'>>) => {
+const ModalContent = ({
+  children,
+  ...props
+}: Omit<ModalProps, 'visible' | 'onClose'> & { children: React.ReactElement<ImperativeModalChildrenProps<{}>> }) => {
   const [visible, setVisible] = useSafeState(true);
 
   return (
@@ -37,7 +40,14 @@ const ModalContent = ({ children, ...props }: PropsWithChildren<Omit<ModalProps,
       visible={visible}
       onClose={() => setVisible(false)}
     >
-      {children}
+      {React.isValidElement(children)
+        ? React.cloneElement(children, {
+            // Add any props you want to pass to the child here
+            closeModal() {
+              setVisible(false);
+            },
+          })
+        : null}
     </ModalView>
   );
 };
diff --git a/packages/react-native/src/modal/type.ts b/packages/react-native/src/modal/type.ts
index 899bdd3b93..d8433efa9a 100644
--- a/packages/react-native/src/modal/type.ts
+++ b/packages/react-native/src/modal/type.ts
@@ -70,3 +70,8 @@ export type TipProps = Omit<AlertProps, 'icon' | 'onPress' | 'confirmText'> & {
   /** 关闭图标的不透明度 */
   closeIconActiveOpacity?: number;
 };
+
+export type ImperativeModalChildrenProps<P> = P & {
+  /** 在弹窗组件内调用，用以关闭弹窗 */
+  closeModal: () => void;
+};