防止单独的项目在React-Native中具有2列的FlatList上达到100％的宽度

Question

我有一个numColumns={2}的FlatList，在此FlatList中，我渲染了一个本机基卡项目。 这个想法是要有一张卡片清单，每张卡片都占据父容器的50％。 但是我意识到，例如，如果我有3个项目，则由于卡片样式上的flex: 1，下面的项目将占据宽度的100％。

无论如何，我如何使单独放置的物品只能达到50％的宽度？

这是我的代码：

render() {
    return (
        <View>
            <FlatList
                numColumns={2}
                style={ styles.cardContainer }
                keyExtractor={ this._keyExtractor }
                data={ this.state.itemList }
                renderItem={ this._renderItem }
                >
            </FlatList>
        </View>
    );
}

要应用的样式：

cardContainer: {
    flex: 1,
    flexDirection: 'column'
},

card: {
    flex: 1,
    margin: 10,
    flexBasis: '50%'
},

_renderItem只是上面带有<Card></Card>的{​​{1}}。如果需要，我也可以发布。但是除了内部元素之外，这里没有其他主要样式。

此外，我注意到，当我滚动此FlatList时，如果列表元素未占用垂直空间的100％，则看起来好像有溢出：隐藏在父容器的最大高度下，无论如何，如何使这个FlatList的高度也变为100％？

这是正在发生的事情，而不是预期的结果。

谢谢。

Answer 1

在检查了Rocky建议的可能重复项之后。我为我的具体情况找到了解决方案，并且我认为这是迄今为止最干净的解决方案。 @Emilius Mfuruki表示敬意。

还有其他一些建议，但是在迭代项目上添加flex: 1/n对我来说很有效。因此，如果您有2列，则为1/2，如果3为1/3，依此类推。

希望这对其他人有帮助。