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

fix: 修复弹窗子组件内无法关闭弹窗的bug

Author: chj-damon

.changeset/hip-worms-hide.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+fix: 修复弹窗子组件内无法关闭弹窗的bug

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>
   );
 };

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;
+};