FlatList 使用 2 列。我有奇数个项目要显示。如何让最后一个项目左对齐？

Question

所以我有一个 FlatList 组件，它正在呈现奇数个项目。FlatList 有 2 列，我'space-around'用于列包装器。当项目数为偶数时这很好用，但当它是奇数时，此列表中的最后一个项目将居中对齐。

因此，如果最后一行有一个项目，我如何让该项目向左对齐（flex-start）？

          <FlatList
            columnWrapperStyle={ styles.columnWrapper }
            data={ inStockItems }
            keyExtractor={ item => item.itemId }
            horizontal={ false }
            numColumns={ 2 }
            renderItem={ ({ item }) => (
              <ItemContainer
                // style={ styles.userStoreItem }
                item={ item }
                navigate={ this.props.navigation }
                { ...this.props }
                admin
              />
            ) }
          />

styles.columnWrapper: {
    justifyContent: 'space-around',
  },

Answer 1

您可以添加flex: 0.5到项目容器：

 <FlatList
      columnWrapperStyle={{justifyContent:'space-between', }}
      data={[{key: 'a'}, {key: 'b'}, {key: 'c'}]}
      keyExtractor={item => item.itemId}
      horizontal={false}
      numColumns={2}
      renderItem={({ item, index }) => (
        <View style={{backgroundColor:'red', flex: 0.5, margin: 4}}>{/*Here*/}
          <Text>{index}</Text>
        </View>
      )}
    />

Answer 2

你需要改变 columnWrapperStyle

columnWrapperStyle={{justifyContent:'space-between'}}

你也可以使用 alignItems:'flex-start'

演示

let width = Dimensions.get('screen').width/2 - 8

return (
  <View style={{ flex: 1.0 }}>
    <FlatList
      columnWrapperStyle={{justifyContent:'space-between', }}
      data={[{key: 'a'}, {key: 'b'}, {key: 'c'}]}
      keyExtractor={item => item.itemId}
      horizontal={false}
      numColumns={2}
      renderItem={({ item, index }) => (
        <View style={{backgroundColor:'red', width:width, height:width, margin: 4}}>
          <Text>{index}</Text>
        </View>
      )}
    />
  </View>
);

平面列表图像