如何在FlatList中均匀分配列？

Question

我的网格状FlatList为3x3。我希望根据容器（屏幕）宽度均匀分配3列。在普通视图中，这可以通过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

我通过向FlatList传递“ columnWrapperStyle”来解决此问题：

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

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

Answer 2

看起来contentContainerStyle未定义FlatList。 （https://facebook.github.io/react-native/docs/next/flatlist.html#docsNav）。对于ScrolLView，它已定义。我在这里FlatList得到了一个网格：

const arr = ['1','1','1','1','1','1','1','1','1',];

<FlatList
    numColumns={3}
    data={arr}
    renderItem={this._renderItem}
/>

_renderItem = ({item}) => {
    return <Text style={{flex:1}}>{item}</Text>
};

如果你想轻松搞定，还有一个网格库：

https://github.com/GeekyAnts/react-native-easy-grid