React Native FlatList横向排列异常求助：嵌套JSON列表仍垂直显示

云上老周

2026-5-8

解决React Native FlatList图片横向排列不生效的问题

嘿，我看你遇到FlatList横向排列失效的问题了，咱们来捋一捋问题出在哪，以及怎么快速修复～

问题根源分析

你当前的代码里把FlatList的data设成了[data]，这等于把整个数据源包装成了只有一个元素的数组。然后你在renderItem里又通过item.items.map来渲染所有图片，这些map出来的元素默认是垂直排列的，所以整个FlatList看起来还是垂直的——因为它本质上只渲染了一个包含垂直内容的View，horizontal={true}自然起不到作用。

修复方案

只需要调整FlatList的数据源，让它直接对应你要横向排列的图片数组，同时简化renderItem的逻辑：

把data={[data]}改成data={data.items}，让FlatList直接遍历items数组里的每一项
去掉renderItem里的item.items.map，直接渲染单个item的内容
可选：添加showsHorizontalScrollIndicator={false}隐藏横向滚动条，优化体验

修改后的完整代码

{isLoading ? (
  <ActivityIndicator />
) : (
  <FlatList
    data={data.items}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    keyExtractor={(item, index) => item.id || index.toString()}
    renderItem={({ item, index }) => (
      <TouchableOpacity onPress={() => props.navigation.navigate('Pdp', { articleid: item.id })}>
        <View style={styles.container}>
          <Image
            style={styles.imgyoutubeprev}
            source={{ uri: chkValue(item.snippet.thumbnails.high.url) }}
          />
          <Image
            style={styles.imgyoutubebtnoverlay}
            source={require('../assets/youtubebtn.png')}
          />
        </View>
      </TouchableOpacity>
    )}
  />
)}