css - 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>
      )}
    />