如何在 FlatList 中均匀分布列？答案

【问题标题】：How do you evenly distribute columns in a FlatList?如何在 FlatList 中均匀分布列？
【发布时间】：2018-05-18 13:46:04
【问题描述】：

我有一个类似网格的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}
/>

如您所见，图标都被推到左边。

【问题讨论】：

我不熟悉 React Native 的语法，但是你有没有将父级声明为 display: flex？另外，space-between 周围是否需要引号？

标签： reactjs react-native flexbox

【解决方案1】：

我在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

【讨论】：

因此将flex: 1 添加到 listitem 组件会有所帮助，但它仍然没有占据父组件的整个宽度。这个添加大约是一半。
知道了。除了flex: 1，我还必须添加alignItems: 'center'

【解决方案2】：

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

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

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

【讨论】：