react-native - react-native 如何在同一行上呈现 TouchableOpacity 组件 - 水平

Question

我有一个产品组件 - TouchableOpacity 如图所示。产品数量是动态的。事情是，我想在每行发布 2 个产品。但我不能。它垂直渲染它们，尽管我将水平设置为 true。我该如何解决呢？你有什么建议吗？

这是我的组件样式

这就是它们的呈现方式

Answer 1

flexDirectionreact-native 中的默认值为column. 您应该将其设置row为您的列表容器的样式TouchableOpacity。

这是官方文档中的一个示例：https ://facebook.github.io/react-native/docs/flexbox.html#flex-direction

如果您希望将超出容器大小的元素包装到下一行，则可以设置flexWrap:"wrap". 这是文档：https ://facebook.github.io/react-native/docs/layout-props.html#flexwrap