fix(Modal): 增加containerStyle api

uiwjs · Mar 13, 2023 · ac11e00 · ac11e00
1 parent 5425516
commit ac11e00
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/core/src/Modal/README.md b/packages/core/src/Modal/README.md
@@ -23,7 +23,14 @@ function ButtonGroupView() {
   });
   return (
     <Fragment>
-      <Modal visible={lowerModal}>
+      <Modal 
+        visible={lowerModal} 
+        containerStyle={{ 
+          borderTopRightRadius:10,
+          borderTopLeftRadius:10,
+          overflow: 'hidden',
+        }}
+      >
         <SafeAreaView>
           <View>
             <Button onPress={() => setLowerModal(false)}>
@@ -92,4 +99,6 @@ export default ButtonGroupView
 |------|------|-----|------|
 | placement | 模态框的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | bottom |
 | onClosed | 关闭函数 | `() => void` | - |
+| containerStyle | 样式 | `ViewStyle` | - |
+
 
diff --git a/packages/core/src/Modal/index.tsx b/packages/core/src/Modal/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useRef } from 'react';
-import { Animated, StyleSheet, LayoutChangeEvent, Dimensions } from 'react-native';
+import { Animated, StyleSheet, LayoutChangeEvent, Dimensions, ViewStyle } from 'react-native';
 import MaskLayer, { MaskLayerProps } from '../MaskLayer';
 
 let MainWidth = Dimensions.get('window').width;
@@ -8,10 +8,11 @@ let MainHeight = Dimensions.get('window').height;
 export interface ModalProps extends MaskLayerProps {
   placement?: 'top' | 'right' | 'bottom' | 'left';
   onClosed?: () => void;
+  containerStyle?: ViewStyle;
 }
 
 const Modal = (props: ModalProps = {}) => {
-  const { onClosed, visible, children, placement = 'bottom', ...otherProps } = props;
+  const { onClosed, visible, children, placement = 'bottom', containerStyle, ...otherProps } = props;
   const AnimatedOpacity: Animated.Value = useRef(new Animated.Value(0)).current;
   // const [display] = useState<'none' | 'flex'>('none');
   let [layoutHeight, setLayoutHeight] = useState(0);
@@ -89,7 +90,9 @@ const Modal = (props: ModalProps = {}) => {
     translateStyle.translateX = translateValue;
   }
   const child = (
-    <Animated.View style={[styles.content, placement && styles[placement], { opacity: AnimatedOpacity }]}>
+    <Animated.View
+      style={[styles.content, placement && styles[placement], { opacity: AnimatedOpacity }, containerStyle]}
+    >
       <Animated.View
         onLayout={measureContainer}
         style={[