Merge pull request #777 from thundersdata-frontend/list-issue

feat: 为 List 组件增加 itemStyle 属性用来控制列表项的样式
thundersdata-frontend · Nov 29, 2023 · 5a80593 · 5a80593
2 parents 393b9b6 + 5eeb55d
commit 5a80593
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/.changeset/fast-zebras-nail.md b/.changeset/fast-zebras-nail.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+为 List 组件增加 itemStyle 属性用来控制列表项的样式
diff --git a/packages/react-native/src/list/index.md b/packages/react-native/src/list/index.md
@@ -161,13 +161,13 @@ group:
 
 ## List API
 
-| 属性                | 必填    | 说明                 | 类型              | 默认值 |
-| ------------------- | ------- | -------------------- | ----------------- | ------ |
-| header              | `false` | 标题                 | `ReactNode`       |        |
-| extra               | `false` | 标题右侧内容         | `ReactNode`       |        |
-| items               | `true`  | 列表项               | `ListItemProps[]` |        |
-| itemHeight          | `false` | 列表项高度           | `number`          | `32Ï`  |
-| itemBackgroundColor | `false` | 统一设置列表项背景色 | `主题颜色`        |        |
+| 属性                | 必填    | 说明                 | 类型                    | 默认值 |
+| ------------------- | ------- | -------------------- | ----------------------- | ------ |
+| header              | `false` | 标题                 | `ReactNode`             |        |
+| extra               | `false` | 标题右侧内容         | `ReactNode`             |        |
+| items               | `true`  | 列表项               | `ListItemProps[]`       |        |
+| itemStyle           | `false` | 列表项样式           | `StyleProp<ViewStyle>`  |        |
+| itemBackgroundColor | `false` | 统一设置列表项背景色 | `keyof Theme['colors']` |        |
 
 ## ListHeader API
 

diff --git a/packages/react-native/src/list/index.tsx b/packages/react-native/src/list/index.tsx
@@ -16,10 +16,12 @@ type ListProps = {
   extra?: ReactNode;
   /** 列表项 */
   items: ListItemProps[];
+  /** 列表项样式 */
+  itemStyle?: StyleProp<ViewStyle>;
   /** 列表项背景色 */
   itemBackgroundColor?: string;
 };
-const List: FC<ListProps> = ({ header, extra, itemBackgroundColor, items = [] }) => {
+const List: FC<ListProps> = ({ header, extra, itemBackgroundColor, itemStyle, items = [] }) => {
   const Header = useMemo(() => {
     if (!header) return null;
     if (typeof header === 'string') {
@@ -32,7 +34,7 @@ const List: FC<ListProps> = ({ header, extra, itemBackgroundColor, items = [] })
     <Box>
       {Header}
       {items.map((props, index) => {
-        return <ListItem key={index} {...props} backgroundColor={itemBackgroundColor} />;
+        return <ListItem key={index} {...props} backgroundColor={itemBackgroundColor} style={itemStyle} />;
       })}
     </Box>
   );