React Native报列表key属性唯一警告、图标不显示及assets资源加载求助

报错修复方案 #

1. 消除key属性警告 #

该警告是因为你在遍历ratingArray渲染评分星星时，没有给列表元素添加唯一key属性，React无法识别列表项的唯一性导致的。
修改StoreInfo.js中星星渲染的代码段即可：

{ratingArray.map((_, index) => (
  <SvgXml key={index} xml={star} width={30} height={30} />
))}

因为你的评分星星列表不会发生动态增删、排序操作，直接使用数组索引作为key即可解决警告。

2. 修复分类图标不显示问题 #

你的分类图标无法渲染是因为Icon组件的样式写法错误，styled-components中样式属性需要用冒号赋值而非等号：

// 错误写法
const Icon = styled(Image)`
  width= 35px;
  height= 35px;
  margin-left: ${(props) => props.theme.space[3]}
`

// 正确写法
const Icon = styled(Image)`
  width: 35px;
  height: 35px;
  margin-left: ${(props) => props.theme.space[3]}
`
修改后网络地址的分类图标即可正常显示。

---
## 本地assets资源加载方法
### 普通静态图片（png/jpg/webp格式）
React Native加载本地静态图片需要使用`require`语法，且不能动态拼接路径，需要提前声明所有资源路径：
1. 将图片放入项目`assets`文件夹中，例如`assets/category/coffee.png`
2. 静态加载直接传入require结果即可：
```js
<Icon source={require('../../../../assets/category/coffee.png')} />

3. 动态加载不同分类图标时，提前把所有资源映射为对象：

// 提前声明所有分类图标路径
const categoryIcons = {
  coffee: require('../../../../assets/category/coffee.png'),
  restaurant: require('../../../../assets/category/restaurant.png'),
  shop: require('../../../../assets/category/shop.png')
}

// 使用时传入分类字段即可
<Icon source={categoryIcons[store.category]} />

SVG格式资源 #

你当前使用的react-native-svg的SvgXml组件即可满足需求，新增本地SVG图标时，将SVG代码导出为字符串文件即可：

1. 新建assets/coffeeIcon.js：

export default `<svg width="35" height="35" viewBox="0 0 35 35" fill="none">
  <!-- 你的SVG代码 -->
</svg>`

2. 引入后直接使用：

import coffeeIcon from '../../../../assets/coffeeIcon'

// 渲染
<SvgXml xml={coffeeIcon} width={35} height={35} />

内容的提问来源于stack exchange，提问作者Diana