【问题标题】: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%' 而不是静态值,以确保设备的宽度正确缩放

    【讨论】:

      猜你喜欢
      • 2018-05-30
      • 1970-01-01
      • 2022-01-02
      • 2021-01-11
      • 2021-09-04
      • 2019-03-12
      • 1970-01-01
      • 2019-04-29
      • 1970-01-01
      相关资源
      最近更新 更多