React Native中如何在FlatList内横向展示图片？

你的问题核心出在两点：

• 虽给FlatList添加了horizontal={true}，但列表项未设置固定宽度，导致横向排列时无法正确分配空间
• 外层布局的样式限制了FlatList的横向展示空间

按以下步骤修改即可解决：

1. 确保FlatList正确开启横向模式
   确认horizontal属性是布尔值true（而非字符串），可额外添加showsHorizontalScrollIndicator={false}隐藏默认滚动条提升体验。

2. 给列表项设置固定宽度
   图片所在的View必须设置明确宽度，否则横向排列时所有item会挤在一起。同时给Image设置合适的宽高和缩放模式，保证图片显示比例正常。

修改后的关键代码示例：

<FlatList
  horizontal={true}
  showsHorizontalScrollIndicator={false}
  data={imageData}
  renderItem={({ item }) => (
    <View style={{ width: 160, marginHorizontal: 8 }}>
      <Image
        source={{ uri: item.url }}
        style={{ width: '100%', height: 140, borderRadius: 6 }}
        resizeMode="cover"
      />
    </View>
  )}
  keyExtractor={(item) => item.id.toString()}
/>

3. 检查外层布局样式
   确保包裹FlatList的父View没有设置flexDirection: column这类限制横向空间的样式，同时给父容器设置合适高度，避免FlatList被压缩显示不全。

外层布局示例：

<View style={{ flex: 1, paddingVertical: 12 }}>
  {/* 放置上述FlatList */}
</View>

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