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

Question

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

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

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

您好，这会使项目从右侧的屏幕上消失，然后进行滚动。它应该尽可能多地适合一行中的项目，直到到达屏幕的右侧，然后放到下一行等。

请帮助。

谢谢

Answer 1

您应该将flexDirection:row放在TouchableOpacity中，您不希望FlatList排成一行，而您希望里面的内容是

编辑

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

<FlatList horizontal={true} />

Answer 2

很抱歉小姐信息。我错了，您可以通过执行此道具contentContainerStyle中的样式来实现您想要的。 FlatList使用ScrollView道具，该道具具有样式化FlatList内容的道具
有关道具的更多信息，请参见this。

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

查看此example