如何在 React Native flexbox 中水平包装项目？答案

【问题标题】：How to wrap items horizontally in React Native flexbox?如何在 React Native flexbox 中水平包装项目？
【发布时间】：2019-03-22 23:37:41
【问题描述】：

我正在尝试包装我的物品，因此每行有多个物品。但它只是拒绝这样做。

如果有足够的空间，下一个项目应该在同一行。

例如我是灰色的吗？删除我 - 应该在同一行，因为有足够的空间等。

嗨，这将使项目向右离开屏幕，然后会发生滚动。它应该在该行中容纳尽可能多的项目，直到它到达屏幕的右侧，然后放到下一行等等。

请帮忙。

谢谢

【问题讨论】：

标签： reactjs flexbox native

【解决方案1】：

对于错过的信息，我感到非常抱歉。我错了，你想要的可以通过这个道具contentContainerStyle中的样式来实现。 FlatList 使用 ScrollView 道具，该道具具有设置 FlatList 内容样式的道具
有关该道具的更多信息，请参阅this。

通过将flexDirection: 'row' 添加到contentContainerStyle 可以使内容水平，添加flexWrap: 'wrap' 通过在没有空格时更改行来完成所需的设计

看到这个example

【讨论】：

【解决方案2】：

您应该将flexDirection:row 放在TouchableOpacity 中，您不希望FlatList 排成一行，您希望里面有什么

编辑

在FlatList 上，您有一个名为horizontal 的道具将其设置为true。它可能会有想要的设计

<FlatList horizontal={true} />

【讨论】：

嗨，这会使项目向右离开屏幕，然后会发生滚动。它应该尽可能多地容纳该行上的项目，直到它到达屏幕的右侧，然后下降到下一行等等。
我不认为你可以用FlatList实现你想要的，最相似的设计是将numColumns设置为你想要的列数并删除horizontal prop，因为 FlatList 不支持wrap