如何在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属性。