FlatList中flexDirection: 'row'不生效，求实现指定布局

嘿，我懂你遇到的困扰了——在FlatList里直接设置flexDirection: 'row'确实达不到多行横向换行的效果，这是因为FlatList的布局逻辑和普通View不一样，我给你两个实用的解决方案：

方案一：用FlatList自带的numColumns属性（推荐） #

这是实现网格布局最省心的方式，FlatList专门提供了numColumns来控制每行显示的item数量，完全不用纠结flex布局的细节：

<FlatList
  data={你的数据源}
  numColumns={4}  // 对应你想要的每行4个item
  renderItem={({ item }) => (
    <View style={{ margin: 2, flex: 1, backgroundColor: '#fff', borderWidth: 1, borderColor: '#aaa' }}>
      <TouchableOpacity activeOpacity={0.9} style={{ height: 190 }}>
        <Image 
          source={item.image} 
          style={{ width: '100%', height: '100%' }} 
          resizeMode="cover" 
        />
      </TouchableOpacity>
    </View>
  )}
  keyExtractor={(item, index) => index.toString()}
/>

这里把item的宽度设为flex:1，结合numColumns={4}，每个item会自动平分每行的宽度，再加上margin，刚好能实现你要的紧凑网格效果。

方案二：用contentContainerStyle实现flexWrap换行 #

如果你一定要用flex布局的思路，要注意：FlatList的item是放在内部的contentContainer里的，不是直接在FlatList的根容器中，所以你需要把flexDirection和flexWrap设置在contentContainerStyle上，而不是FlatList的style属性里：

<FlatList
  data={你的数据源}
  contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}
  renderItem={({ item }) => (
    <View style={{ margin: 2, width: '24%', backgroundColor: '#fff', borderWidth: 1, borderColor: '#aaa' }}>
      <TouchableOpacity activeOpacity={0.9} style={{ height: 190 }}>
        <Image 
          source={item.image} 
          style={{ width: '100%', height: '100%' }} 
          resizeMode="cover" 
        />
      </TouchableOpacity>
    </View>
  )}
  keyExtractor={(item, index) => index.toString()}
/>

这里要注意别给FlatList加horizontal={true}，因为横向模式下flexWrap是不生效的，会强制单行滚动。

为什么你之前的做法没用？ #

大概率是你把flexDirection: 'row'写在了FlatList的style里，而不是contentContainerStyle——FlatList的style是控制它自身在父容器中的布局，内部item的排列逻辑是由contentContainerStyle来管理的，所以之前的设置根本没作用到item上。

试试上面的方法，应该就能实现你想要的多行横向布局啦！

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