React Native 如何将数组数据中的多张图片按行水平排列显示

核心问题点 #

• 箭头函数无返回值：你在map的回调中使用了带花括号的写法，但是没有添加return语句，导致遍历返回的全是undefined，没有实际渲染的元素，所以页面无内容展示。
• flex布局位置错误：你将flexDirection: 'row'写在了遍历生成的每个子View上，相当于每个图片单独被一个横向容器包裹，最终图片会纵向排列，无法实现全部图片在一行展示的效果，这个属性应该放在包裹所有图片的父容器上。
• 缺少key属性：循环渲染React元素时必须添加唯一key，否则会抛出运行时警告。

修正后的代码 #

<View style={{flexDirection: 'row', gap: 10 /* 可自行调整图片间距 */}}>
  {Data.CompanyImages.map((item, index) => (
    <Image
      key={index}
      style={{
        height: 80,
        width: 80,
        marginTop: 1.5,
        borderRadius: 7,
      }}
      source={{uri: item}}
    />
  ))}
</View>

额外排查点 #

如果修改后还是加载不出图片，可检查：

1. 图片链接是否可正常访问
2. 安卓端如果是http链接需要在AndroidManifest.xml中开启明文流量权限，可配置占位图排查是否是图片加载失败的问题。

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