React Native：如何使用 flexbox 创建“网格”布局？答案

【问题标题】：React Native: How to create "grid" layout using flexbox?React Native：如何使用 flexbox 创建“网格”布局？
【发布时间】：2021-04-27 15:19:28
【问题描述】：

我想在我的移动 React Native 应用程序上使用 3xN 布局，所以是这样的：

[    ] [    ] [    ]    
title1 title2 title3    
                        
[    ] [    ] [    ]
title4 title5 title6

[    ] [    ] [    ]
title7 title8 title9

...    ...    ...

整个布局，垂直方向，将在一个 ScrollView 中，因此即使它加载的项目超过 1 个屏幕可以显示的内容，它也可以完整地正确显示。

【问题讨论】：

标签： css react-native gridview flexbox

【解决方案1】：

只需在容器上设置 flexWrap: 'wrap'，如果您希望每行的项目数量恒定，请为您的项目指定 flexBasis: '33%' 而不是静态值，以确保设备的宽度正确缩放

【讨论】：