reactjs - 如何在 FlatList 中均匀分布列？

Question

我有一个 3x3 的类似网格的 FlatList。我希望 3 列根据容器(屏幕)宽度均匀分布。在普通 View 中，这可以通过 justifyContent: 'space- Between' 来完成，但是当通过 contentContainerStyle 使用时，这不会执行任何操作。

<FlatList
  contentContainerStyle={{ justifyContent: 'space-between' }}
  horizontal={false}
  scrollEnabled={false}
  numColumns={3}
  data={this.props.icons}
  extraData={this.props.selectedIcon}
  renderItem={this.renderItem}
  keyExtractor={this.keyExtractor}
/>

正如您所看到的，图标都被推到了左边。

Answer 1

我通过将“columnWrapperStyle”传递给 FlatList 解决了这个问题:

<FlatList
    data={array}
    renderItem={this.renderItem}
    numColumns={10}
    columnWrapperStyle={style.row}
/>

const style = StyleSheet.create({
  row: {
    flex: 1,
    justifyContent: "space-around"
  }
});