From 5eeb55d5070d44f77f44818657a2dc5703145de1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= <chj_0507_dz@sina.com>
Date: Wed, 29 Nov 2023 16:11:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=20List=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20itemStyle=20=E5=B1=9E=E6=80=A7=E7=94=A8?=
 =?UTF-8?q?=E6=9D=A5=E6=8E=A7=E5=88=B6=E5=88=97=E8=A1=A8=E9=A1=B9=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/fast-zebras-nail.md           |  5 +++++
 packages/react-native/src/list/index.md  | 14 +++++++-------
 packages/react-native/src/list/index.tsx |  6 ++++--
 3 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/fast-zebras-nail.md

diff --git a/.changeset/fast-zebras-nail.md b/.changeset/fast-zebras-nail.md
new file mode 100644
index 0000000000..8e6eace631
--- /dev/null
+++ 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
index 3719eb03f4..832366e406 100644
--- 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
index cdf5745a48..da37fef16a 100644
--- 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>
   );