如何在FlatList中均匀分配列？

Question

我有一个类似FlatList3x3 的网格。我希望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

我有一个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