feat: Picker support modalType(#1383)

components/modal/useModal/index.tsx

@@ -20,7 +20,7 @@ function useModal(): readonly [
   const [actionQueue, setActionQueue] = React.useState<
     {
       key: number
-      el: React.ReactElement<OperationContainer>
+      el: React.ReactElement
     }[]
   >([])
 

components/picker/Picker.tsx

@@ -59,6 +59,7 @@ const RMCPicker = forwardRef<PickerRef, RMCPickerProps>((props, ref) => {
     innerValue,
     columns,
     handleSelect,
+    modalType,
     ...restProps
   } = props
 
@@ -190,7 +191,8 @@ const RMCPicker = forwardRef<PickerRef, RMCPickerProps>((props, ref) => {
         onDismiss={handleDismiss}
         onClose={actions.close}
         okButtonProps={okButtonProps}
-        dismissButtonProps={dismissButtonProps}>
+        dismissButtonProps={dismissButtonProps}
+        modalType={modalType}>
         {/* TODO: 组件卸载是在visible更新fasle之后,需要前置 */}
         {/* 否则会无效执行onPickerChange */}
         {innerVisible && (

components/picker/Popup.tsx

@@ -15,6 +15,7 @@ const PopupPicker = memo((props: PopupPickerProps) => {
     onOk,
     onClose,
     children,
+    modalType,
   } = props
 
   const titleEl =
@@ -41,6 +42,7 @@ const PopupPicker = memo((props: PopupPickerProps) => {
   return (
     <Modal
       animationType="slide-up"
+      modalType={modalType}
       wrapStyle={styles.modal}
       style={styles.container}
       visible={visible}

components/picker/PopupPickerTypes.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { TouchableHighlightProps } from 'react-native'
+import { ModalPropsType } from '../modal/PropsType'
 import { PickerStyle } from './style'
 
 export type PopupPickerProps = {
@@ -14,4 +15,4 @@ export type PopupPickerProps = {
   dismissButtonProps?: TouchableHighlightProps
   children?: ReactNode
   styles: Partial<PickerStyle>
-}
+} & Pick<ModalPropsType, 'modalType'>

components/picker/index.en-US.md

@@ -112,3 +112,29 @@ Properties | Descrition | Type
 
 ### Ref
 Same as PickerActions
+
+
+## FAQ
+
+### Why is the Picker hidden when it popup in the native Modal?
+
+By default, `<Picker />` is dynamically inserted into the `<Provider>` root node via `Portal.add`, and the zIndex level of the native Modal is above everything, including its root node.
+
+So if you must use the `<Picker />` component in the native Modal, you can set `modalType='modal'` to keep it at the same level as the native Modal.
+
+```tsx
+import {Modal} from 'react-native';
+import {Picker} from '@ant-design/react-native';
+
+<Modal>
+  ...
+
+  <Picker
+    modalType="modal" // add here
+    visible={visible}
+    data={data}>
+    <List.Item arrow="horizontal">省市选择</List.Item>
+  </Picker>
+
+</Modal>
+```

components/picker/index.zh-CN.md

@@ -112,3 +112,29 @@ interface PickerStyle extends Partial<PickerViewStyle> {
 
 ### Ref
 同 PickerActions
+
+
+## FAQ
+
+### 为什么在原生 Modal 中弹出 Picker 会被遮住？
+
+默认情况下，`<Picker />`是通过 `Portal.add` 动态插入到 `<Provider>` 根节点的，而原生 Modal 的zIndex层级高于一切，包括它的根节点。
+
+所以如果一定要在原生 Modal 中同时使用 `<Picker />` 组件，可以通过设置 `modalType='modal'` 来保持和原生 Modal 同一层级。 
+
+```tsx
+import {Modal} from 'react-native';
+import {Picker} from '@ant-design/react-native';
+
+<Modal>
+  ...
+
+  <Picker
+    modalType="modal" // add here
+    visible={visible}
+    data={data}>
+    <List.Item arrow="horizontal">省市选择</List.Item>
+  </Picker>
+
+</Modal>
+```