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` | | +| 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; /** 列表项背景色 */ itemBackgroundColor?: string; }; -const List: FC = ({ header, extra, itemBackgroundColor, items = [] }) => { +const List: FC = ({ header, extra, itemBackgroundColor, itemStyle, items = [] }) => { const Header = useMemo(() => { if (!header) return null; if (typeof header === 'string') { @@ -32,7 +34,7 @@ const List: FC = ({ header, extra, itemBackgroundColor, items = [] }) {Header} {items.map((props, index) => { - return ; + return ; })} );