React Native:如何使用 flexbox 创建 "grid" 布局?
React Native: How to create "grid" layout using flexbox?
我想在我的移动 React Native 应用程序上使用 3xN 布局,所以像这样:
[ ] [ ] [ ]
title1 title2 title3
[ ] [ ] [ ]
title4 title5 title6
[ ] [ ] [ ]
title7 title8 title9
... ... ...
整个布局,垂直方向,将在 ScrollView 中,这样即使它加载的项目超过 1 个屏幕可以显示的项目,它也可以完整地正确显示。
只需在容器上设置 flexWrap: 'wrap'
,如果您希望每行的项目数量不变,请为您的项目提供 flexBasis: '33%'
而不是静态值,以确保宽度适合设备
我想在我的移动 React Native 应用程序上使用 3xN 布局,所以像这样:
[ ] [ ] [ ]
title1 title2 title3
[ ] [ ] [ ]
title4 title5 title6
[ ] [ ] [ ]
title7 title8 title9
... ... ...
整个布局,垂直方向,将在 ScrollView 中,这样即使它加载的项目超过 1 个屏幕可以显示的项目,它也可以完整地正确显示。
只需在容器上设置 flexWrap: 'wrap'
,如果您希望每行的项目数量不变,请为您的项目提供 flexBasis: '33%'
而不是静态值,以确保宽度适合设备