Как обернуть предметы по горизонтали в React Native flexbox?

Question

Я пытаюсь упаковать свои элементы, чтобы в каждой строке было несколько элементов. Но он просто отказывается это делать.

Если места достаточно, следующий предмет должен быть в той же строке.

например, я серый? Удалить меня - должно быть на одной строке, потому что места более чем достаточно и т. Д.

Привет, это заставит элементы исчезнуть с экрана вправо, и тогда произойдет прокрутка. Он должен уместить столько элементов в строке, сколько сможет, пока не достигнет правой части экрана, а затем перейти к следующей строке и т. Д.

Пожалуйста, помогите.

Спасибо

Answer 1

Вы должны поместить flexDirection:row в TouchableOpacity, вы не хотите, чтобы FlatList был в ряду, вы хотите, чтобы то, что внутри, было

EDIT

На FlatList у вас есть реквизит с именем horizontal и установите его в true. Это, вероятно, будет иметь желаемый дизайн

<FlatList horizontal={true} />

Answer 2

Мне очень жаль пропущенную информацию. Я был неправ, то, что вы хотите, достижимо, выполняя стили в этой пропе contentContainerStyle. FlatList использует реквизиты ScrollView, у которых есть эта опора, которая стилизует контент FlatList
См. this для получения дополнительной информации о опоре.

Добавление flexDirection: 'row' к contentContainerStyle делает содержимое горизонтальным, а добавление flexWrap: 'wrap' завершает желаемый дизайн, изменяя строки, когда в нем нет места

См. пример