React Native中如何为FlatList配置space-between与自动换行布局效果

问题根源 #

你使用FlatList时设置了numColumns={6}，这个属性会强制FlatList每行固定渲染6个元素，无法实现自适应自动换行的效果；同时你错误地把布局样式加在了columnWrapperStyle上，没有使用FlatList控制内容容器样式的正确属性。

解决方案 #

1. 删除FlatList的numColumns和columnWrapperStyle属性
2. 给FlatList添加contentContainerStyle属性，绑定你已经定义好的styles.itemslist样式即可，这个属性专门用来控制FlatList内部滚动内容容器的样式，和你之前包裹map的外层View作用完全一致。

修改后代码 #

<FlatList
  contentContainerStyle={styles.itemslist}
  data={vols}
  renderItem={({item}) => (
    <Text style={styles.box}>{item}</Text>
  )}
/>

修改后就能复现和原生View实现完全一致的space-between加自动换行的布局效果。如果不需要列表的滚动复用能力，直接用原有的View实现性能反而更高。

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