如何在React Native中构建以下网格

Question

我正在尝试使用React Native从手机重建联系人列表。网格看起来像这样：

目前我有一个网格包装，其样式为{ flexDirection: 'row', flexWrap: 'wrap' }，每个孩子都有{ width: '40%', flexGrow: 1 }样式。如果有一个偶数个孩子，它可以正常工作，但是当有一个奇数时，最后一个孩子会占用整个宽度。我需要最后一个孩子向左漂浮并且与其他孩子具有相同的宽度。最好的方法是什么？

Answer 1

containerStyle { flexDirection: 'row', flexWrap: 'wrap' } contactItemStyle { height: 100, width: '50%' }宽度40％没有意义，因为100/2 = 50。

您可以将contactItems的高度设置为大于0的任何值。忘记contactItems上的flexGrow属性。