fix(Table):添加表格明暗主题适配

panbibi · panbibi · commit 0d618c2c7635 · 2023-04-08T15:42:04.000+08:00
diff --git a/example/examples/src/routes/Badge/index.tsx b/example/examples/src/routes/Badge/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import {Text} from 'react-native';
-import {Badge, List} from '@uiw/react-native';
+import {Badge, List, Text} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
 const {Header, Body, Footer} = Layout;
@@ -18,41 +17,28 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
           <Header title={title} description={description} />
           <Body>
             <List size="small" flat={false}>
-              <List.Item onPress={() => navigation.goBack()}>
-                这6种编码方法，你掌握了几个？
-              </List.Item>
+              <List.Item onPress={() => navigation.goBack()}>这6种编码方法，你掌握了几个？</List.Item>
               <List.Item extra={<Badge text="450k" color="green" />}>
                 <Badge type="dot" text={<Text>450k</Text>} color="green" />
-                <Text>Protobuf 生成 Go代码指南</Text>
-              </List.Item>
-              <List.Item extra={<Badge text="10" color="green" />}>
-                Git 版本控制的核心概念
-              </List.Item>
-              <List.Item extra={<Badge text="450k" color="green" />}>
-                HTTP Referer 和 Referrer Policy
-              </List.Item>
-              <List.Item extra={<Badge text="450k" color="yellow" />}>
-                何解？浪费一年时间，我学了假人工智能
+                <Text color="text">Protobuf 生成 Go代码指南</Text>
               </List.Item>
+              <List.Item extra={<Badge text="10" color="green" />}>Git 版本控制的核心概念</List.Item>
+              <List.Item extra={<Badge text="450k" color="green" />}>HTTP Referer 和 Referrer Policy</List.Item>
+              <List.Item extra={<Badge text="450k" color="yellow" />}>何解？浪费一年时间，我学了假人工智能</List.Item>
               <List.Item extra={<Badge text="450k" color="green" />}>
-                <Text>超燃！高效 MacBook 工作环境配置，超实用</Text>
+                <Text color="text">超燃！高效 MacBook 工作环境配置，超实用</Text>
               </List.Item>
               <List.Item extra={<Badge text="标记" color="red" />}>
-                <Text>一文带你搞懂 API 网关</Text>
+                <Text color="text">一文带你搞懂 API 网关</Text>
               </List.Item>
             </List>
-            <List
-              size="small"
-              flat={false}
-              title="设置类型 type?: 'dot' | 'text'">
-              <List.Item
-                extra={<Badge type="dot" text="450k" color="red" />}
-                onPress={() => navigation.goBack()}>
+            <List size="small" flat={false} title="设置类型 type?: 'dot' | 'text'">
+              <List.Item extra={<Badge type="dot" text="450k" color="red" />} onPress={() => navigation.goBack()}>
                 这6种编码方法，你掌握了几个？
               </List.Item>
               <List.Item extra={<Badge text="450k" color="red" />}>
                 <Badge type="dot" text="450k" color="green" />
-                <Text>Protobuf 生成 Go代码指南</Text>
+                <Text color="text">Protobuf 生成 Go代码指南</Text>
               </List.Item>
             </List>
           </Body>
diff --git a/packages/core/src/Table/index.tsx b/packages/core/src/Table/index.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { View, Text, StyleSheet, Dimensions, ScrollView } from 'react-native';
 import BodyRow from './BodyRow';
 import { colors } from '../utils';
+import { useTheme } from '@shopify/restyle';
+import { Theme } from '../theme';
 
 interface TableProps {
   data: Array<Object>;
@@ -20,6 +22,11 @@ interface columnsState {
 }
 // table组件
 const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps) => {
+  const theme = useTheme<Theme>();
+  const styles = createStyles({
+    bgColor: theme.colors.background || '#F5F5F5',
+    textColor: theme.colors.primary_text || '#ccc',
+  });
   const getRowKey: (record: any) => string = (record) => {
     const key = typeof rowKey === 'function' ? rowKey(record) : record && record[rowKey];
     return key;
@@ -32,7 +39,11 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
           {columns.map((itm, idx) => (
             <View
               key={itm.dataIndex + idx}
-              style={[styles.contRight, { borderRightWidth: idx === columns.length - 1 ? 0 : 1 }, itm.style ? itm.style : styles.titleFlex]}
+              style={[
+                styles.contRight,
+                { borderRightWidth: idx === columns.length - 1 ? 0 : 1 },
+                itm.style ? itm.style : styles.titleFlex,
+              ]}
             >
               <Text style={styles.content}>{itm.title}</Text>
             </View>
@@ -41,13 +52,7 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
         <View testID="RNE__Table__body">
           {data.map((item, idx) => {
             const key = getRowKey(item);
-            return (
-              <BodyRow
-                key={key}
-                columns={columns}
-                record={item}
-              />
-            );
+            return <BodyRow key={key} columns={columns} record={item} />;
           })}
         </View>
         {data.length === 0 && <Text style={styles.noDataText}>暂无数据...</Text>}
@@ -56,42 +61,49 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
   );
 };
 
-const styles = StyleSheet.create({
-  title: {
-    backgroundColor: colors.white,
-    height: 30,
-  },
-  conTitle: {
-    flexDirection: 'row',
-    borderWidth: 1,
-    borderColor: colors.colorsPalette.dark70,
-  },
-  content: {
-    color: colors.colorsPalette.dark30,
-  },
-  contRight: {
-    borderRightWidth: 1,
-    borderRightColor: colors.colorsPalette.dark70,
-    borderBottomColor: colors.colorsPalette.dark70,
-    color: '#888888',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 5,
-    paddingBottom: 5,
-  },
-  conW: {
-    backgroundColor: colors.white,
-  },
-  noDataText: {
-    color: '#888888',
-    textAlign: 'center',
-    paddingTop: 4,
-    paddingBottom: 4,
-  },
-  titleFlex: {
-    flex: 1
-  }
-});
+type CreStyle = {
+  bgColor: string;
+  textColor: string;
+};
+
+function createStyles({ bgColor, textColor }: CreStyle) {
+  return StyleSheet.create({
+    title: {
+      backgroundColor: colors.white,
+      height: 30,
+    },
+    conTitle: {
+      flexDirection: 'row',
+      borderWidth: 1,
+      borderColor: colors.colorsPalette.dark70,
+    },
+    content: {
+      color: textColor,
+    },
+    contRight: {
+      borderRightWidth: 1,
+      borderRightColor: colors.colorsPalette.dark70,
+      borderBottomColor: colors.colorsPalette.dark70,
+      color: '#888888',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingTop: 5,
+      paddingBottom: 5,
+    },
+    conW: {
+      backgroundColor: bgColor,
+    },
+    noDataText: {
+      color: '#888888',
+      textAlign: 'center',
+      paddingTop: 4,
+      paddingBottom: 4,
+    },
+    titleFlex: {
+      flex: 1,
+    },
+  });
+}
 
 export default Table;
