reactjs - 如何在 React Native Flexbox 中水平包装项目?

标签 reactjs flexbox native

我正在尝试将我的项目换行,以便每行有多个项目。但它只是拒绝这样做。

如果有足够的空间,下一个项目应该位于同一行。

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

嗨,这将使项目向右离开屏幕,然后发生滚动。它应该在该行中容纳尽可能多的项目,直到到达屏幕的右侧,然后下降到下一行,依此类推。

请帮忙。

谢谢

最佳答案

非常抱歉漏掉了信息。我错了,你想要的可以通过执行此 Prop contentContainerStyle 中的样式来实现。 FlatList 使用 ScrollView 属性,该属性具有用于设置 FlatList 内容样式的属性
请参阅this有关该 Prop 的更多信息。

通过将 flexDirection: 'row' 添加到 contentContainerStyle 可以使内容水平,并添加 flexWrap: 'wrap' 通过在以下情况下更改行来完成所需的设计:它没有空间

查看此example

关于reactjs - 如何在 React Native Flexbox 中水平包装项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55245203/

相关文章:

reactjs - Next.js App Router 的 SEO 性能 : Server Component or Client Components?

html - 如何使用包含图像的 CSS flexbox 制作列?

java - Monodroid 应用程序是完整的 Java 字节码还是 native 代码?

compiler-construction - 编写本地语言编译器

google-maps - 如何从移动 Safari 浏览器链接到 native Google Maps iOS 应用程序

javascript - 如何在 react-hook-form 中仅输入数字

reactjs - 通过 react-three-fibre 中的 Prop 传递纹理的 URL

javascript - 全局导入的变量未定义

html - 如何放置 <aside> 元素 'aside' 主要内容

html - 为什么 flex 元素不缩小过去的内容大小?