From da60d29ed5151d57bfd07cc82f7aebd5c5fd9863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= <chj_0507_dz@sina.com>
Date: Mon, 2 Sep 2024 17:19:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BAModal=E5=A2=9E=E5=8A=A0show?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/giant-tables-hunt.md               |  5 +++
 packages/react-native/src/modal/index.tsx     |  3 +-
 .../react-native/src/modal/show/index.tsx     | 43 +++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/giant-tables-hunt.md
 create mode 100644 packages/react-native/src/modal/show/index.tsx

diff --git a/.changeset/giant-tables-hunt.md b/.changeset/giant-tables-hunt.md
new file mode 100644
index 0000000000..097f6d7164
--- /dev/null
+++ b/.changeset/giant-tables-hunt.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+feat: 为Modal增加show方法，实现指令式打开弹窗的功能
diff --git a/packages/react-native/src/modal/index.tsx b/packages/react-native/src/modal/index.tsx
index 88f17fbf99..cbf8a6a7de 100644
--- a/packages/react-native/src/modal/index.tsx
+++ b/packages/react-native/src/modal/index.tsx
@@ -2,6 +2,7 @@ import alert from './alert';
 import confirm from './confirm';
 import Modal from './Modal';
 import prompt from './prompt';
+import show from './show';
 import tip from './tip';
 
-export default Object.assign(Modal, { alert, confirm, prompt, tip });
+export default Object.assign(Modal, { alert, confirm, prompt, tip, show });
diff --git a/packages/react-native/src/modal/show/index.tsx b/packages/react-native/src/modal/show/index.tsx
new file mode 100644
index 0000000000..66c171f5f7
--- /dev/null
+++ b/packages/react-native/src/modal/show/index.tsx
@@ -0,0 +1,43 @@
+import React, { PropsWithChildren } from 'react';
+
+import { useSafeState } from '@td-design/rn-hooks';
+
+import Portal from '../../portal';
+import ModalView from '../Modal/ModalView';
+import { ModalProps } from '../type';
+
+export default function show(
+  comp: React.ReactElement,
+  props?: Omit<ModalProps, 'onAnimationEnd' | 'visible' | 'onClose'>
+) {
+  const key = Portal.add(
+    <ModalContent
+      {...props}
+      onAnimationEnd={visible => {
+        if (!visible) {
+          Portal.remove(key);
+        }
+      }}
+    >
+      {comp}
+    </ModalContent>
+  );
+}
+
+const ModalContent = ({ children, ...props }: PropsWithChildren<Omit<ModalProps, 'visible' | 'onClose'>>) => {
+  const [visible, setVisible] = useSafeState(true);
+
+  return (
+    <ModalView
+      position="center"
+      maskVisible
+      maskClosable
+      animationType="slide"
+      {...props}
+      visible={visible}
+      onClose={() => setVisible(false)}
+    >
+      {children}
+    </ModalView>
+  );
+};