fix(ActionSheet):添加动作面板明暗主题适配

Author: panbibi

example/examples/src/routes/ActionSheet/index.tsx

@@ -62,7 +62,7 @@ export default class Index extends Component<IndexProps, IndexState> {
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: '#fff',
+    // backgroundColor: '#fff',
     paddingLeft: 20,
     paddingRight: 20,
   },

packages/core/src/ActionSheet/index.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { View, Dimensions, StyleSheet, TextStyle, StyleProp, ViewStyle } from 'react-native';
+import { View, Dimensions, StyleSheet, TextStyle, StyleProp, ViewStyle, useColorScheme } from 'react-native';
 import Modal, { ModalProps } from '../Modal';
 import ActionSheetItem from './item';
 export { default as ActionSheetItem } from './item';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 let MainWidth = Dimensions.get('window').width;
 
@@ -36,6 +38,14 @@ interface ActionSheetState {
 }
 
 export default function ActionSheet(props: ActionSheetProps) {
+  const theme = useTheme<Theme>();
+  const colorScheme = useColorScheme();
+  const styles = createStyles({
+    backgroundColor: colorScheme === 'dark' ? 'rgba(00,00,00,.3)' : 'rgba(95,95,95,.3)',
+    primaryBackground: colorScheme === 'dark' ? theme.colors.black : 'rgba(00,00,00,.6)',
+    mask: theme.colors.mask,
+  });
+
   const {
     children,
     visible: props_visible,
@@ -118,46 +128,54 @@ export default function ActionSheet(props: ActionSheetProps) {
   );
 }
 
-const styles = StyleSheet.create({
-  actionDivider: {
-    backgroundColor: 'rgba(95,95,95,.3)',
-    width: MainWidth,
-    height: 10,
-  },
-  itemDivider: {
-    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',
-  },
-});
+type CreStyle = {
+  backgroundColor: string;
+  primaryBackground: string;
+  mask: string;
+};
+
+function createStyles({ backgroundColor, primaryBackground, mask }: CreStyle) {
+  return StyleSheet.create({
+    actionDivider: {
+      backgroundColor: backgroundColor,
+      width: MainWidth,
+      height: 10,
+    },
+    itemDivider: {
+      backgroundColor: backgroundColor,
+      height: 1,
+      width: MainWidth,
+      marginRight: 15,
+    },
+    actionSheetModalView: {
+      flex: 1,
+      backgroundColor: primaryBackground,
+    },
+    // 取消
+    actionSheetModalViewClose: {
+      backgroundColor: mask,
+      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: mask,
+      borderTopRightRadius: 12,
+      borderTopLeftRadius: 12,
+      borderBottomRightRadius: 12,
+      borderBottomLeftRadius: 12,
+      outline: 'none',
+      boxShadow: 'none',
+    },
+  });
+}

packages/core/src/ActionSheet/item.tsx

@@ -7,9 +7,12 @@ import {
   ViewStyle,
   TextStyle,
   StyleSheet,
-  Text,
   GestureResponderEvent,
+  useColorScheme,
 } from 'react-native';
+import { useTheme } from '@shopify/restyle';
+import { Theme } from '../theme';
+import Text from '../Typography/Text';
 
 let MainWidth = Dimensions.get('window').width;
 export interface ActionSheetItemProps {
@@ -28,10 +31,12 @@ export interface ActionSheetItemProps {
 export interface ActionSheetItemState {}
 
 export default function ActionSheetItem(props: ActionSheetItemProps) {
+  const theme = useTheme<Theme>();
+  const colorScheme = useColorScheme();
   const {
     onPress = () => {},
     activeOpacity = 1,
-    underlayColor = '#f1f1f1',
+    underlayColor = colorScheme === 'light' ? theme.colors.background : '#1A1A22',
     containerStyle,
     textStyle,
     children,