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>, props?: Omit ) { const key = Portal.add( @@ -24,7 +24,10 @@ export default function show( ); } -const ModalContent = ({ children, ...props }: PropsWithChildren>) => { +const ModalContent = ({ + children, + ...props +}: Omit & { children: React.ReactElement> }) => { const [visible, setVisible] = useSafeState(true); return ( @@ -37,7 +40,14 @@ const ModalContent = ({ children, ...props }: PropsWithChildren setVisible(false)} > - {children} + {React.isValidElement(children) + ? React.cloneElement(children, { + // Add any props you want to pass to the child here + closeModal() { + setVisible(false); + }, + }) + : null} ); }; 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 & { /** 关闭图标的不透明度 */ closeIconActiveOpacity?: number; }; + +export type ImperativeModalChildrenProps

= P & { + /** 在弹窗组件内调用,用以关闭弹窗 */ + closeModal: () => void; +};