React Native:如何使用flexbox创建"grid"布局?



我希望在我的移动React Native应用程序上有一个3xN布局,所以类似这样的东西:

[    ] [    ] [    ]    
title1 title2 title3    

[    ] [    ] [    ]
title4 title5 title6
[    ] [    ] [    ]
title7 title8 title9
...    ...    ...

整个布局,垂直方向,将在ScrollView中,这样即使它加载的项目多于一个屏幕所能显示的项目,它也可以完整地正确显示。

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

最新更新