fix(ActionSheet): 调整优化ActionSheet组件布局样式

uiwjs · Mar 28, 2023 · ec22705 · ec22705
1 parent 23436ae
commit ec22705
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 26 deletions.
diff --git a/packages/core/src/ActionSheet/index.tsx b/packages/core/src/ActionSheet/index.tsx
@@ -85,45 +85,79 @@ export default function ActionSheet(props: ActionSheetProps) {
   return (
     <Modal
       placement="bottom"
-      animationType="fade" // slide  none  fade
+      animationType="slide" // slide  none  fade
       transparent={true}
       {...other}
       visible={state.stateVisible}
       onClosed={onModalClose}
     >
-      <View>
-        {React.Children.toArray(children).map((item, index) => (
-          <View key={index}>
-            {index !== 0 && <View style={StyleSheet.flatten([styles.itemDivider, dividerStyle?.itemDivider])} />}
-            {React.cloneElement(item as React.DetailedReactHTMLElement<any, HTMLElement>, {
-              activeOpacity: activeOpacity,
-              underlayColor: underlayColor,
-            })}
-          </View>
-        ))}
-        <View style={StyleSheet.flatten([styles.actionDivider, dividerStyle?.actionDivider])} />
-        <ActionSheetItem
-          activeOpacity={activeOpacity}
-          underlayColor={underlayColor}
-          onPress={() => onCancel?.()}
-          children={cancelText}
-          containerStyle={containerStyle}
-          textStyle={textStyle}
-        />
+      <View style={styles.actionSheetModalView}>
+        <View style={styles.actionSheetModalViewContent}>
+          {React.Children.toArray(children).map((item, index) => (
+            <View key={index}>
+              {index !== 0 && <View style={StyleSheet.flatten([styles.itemDivider, dividerStyle?.itemDivider])} />}
+              {React.cloneElement(item as React.DetailedReactHTMLElement<any, HTMLElement>, {
+                activeOpacity: activeOpacity,
+                underlayColor: underlayColor,
+              })}
+            </View>
+          ))}
+        </View>
+        <View style={styles.actionSheetModalViewClose}>
+          <ActionSheetItem
+            activeOpacity={activeOpacity}
+            underlayColor={underlayColor}
+            onPress={() => onCancel?.()}
+            children={cancelText}
+            containerStyle={containerStyle}
+            textStyle={textStyle}
+          />
+        </View>
       </View>
     </Modal>
   );
 }
 
 const styles = StyleSheet.create({
   actionDivider: {
-    backgroundColor: 'rgba(197,217,232,.3)',
+    backgroundColor: 'rgba(95,95,95,.3)',
     width: MainWidth,
-    height: 6,
+    height: 10,
   },
   itemDivider: {
-    backgroundColor: 'rgba(197,217,232,.3)',
-    height: 2,
+    backgroundColor: 'rgba(95,95,95,.3)',
+    height: 1,
     width: MainWidth,
+    marginRight: 15,
+  },
+  actionSheetModalView: {
+    flex: 1,
+    backgroundColor: 'rgba(00,00,00,.6)',
+  },
+  // 取消
+  actionSheetModalViewClose: {
+    backgroundColor: '#fff',
+    marginTop: 8,
+    marginLeft: 8,
+    marginRight: 8,
+    marginBottom: 16,
+    borderTopRightRadius: 12,
+    borderTopLeftRadius: 12,
+    borderBottomRightRadius: 12,
+    borderBottomLeftRadius: 12,
+    outline: 'none',
+    boxShadow: 'none',
+  },
+  // 内容
+  actionSheetModalViewContent: {
+    marginLeft: 8,
+    marginRight: 8,
+    backgroundColor: '#fff',
+    borderTopRightRadius: 12,
+    borderTopLeftRadius: 12,
+    borderBottomRightRadius: 12,
+    borderBottomLeftRadius: 12,
+    outline: 'none',
+    boxShadow: 'none',
   },
 });
diff --git a/packages/core/src/ActionSheet/item.tsx b/packages/core/src/ActionSheet/item.tsx
@@ -38,7 +38,12 @@ export default function ActionSheetItem(props: ActionSheetItemProps) {
   } = props;
 
   return (
-    <TouchableHighlight activeOpacity={activeOpacity} underlayColor={underlayColor} onPress={onPress}>
+    <TouchableHighlight
+      style={styles.touchableHighlightItem}
+      activeOpacity={activeOpacity}
+      underlayColor={underlayColor}
+      onPress={onPress}
+    >
       <View style={StyleSheet.flatten([styles.actionSheetItem, containerStyle])}>
         <Text style={StyleSheet.flatten([styles.actionSheetItemText, textStyle])}>{children}</Text>
       </View>
@@ -49,12 +54,18 @@ export default function ActionSheetItem(props: ActionSheetItemProps) {
 const styles = StyleSheet.create({
   actionSheetItem: {
     width: MainWidth,
-    height: 50,
+    height: 60,
     justifyContent: 'center',
     alignItems: 'center',
   },
   actionSheetItemText: {
     fontSize: 20,
     fontWeight: '400',
   },
+  touchableHighlightItem: {
+    borderTopRightRadius: 12,
+    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 12,
+    borderBottomRightRadius: 12,
+  },
 });