Как построить следующую сетку в 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. Забудьте свое свойство flexGrow в contactItems.