Javascript 如何在React Native中使用九方形视图进行布局？

如何实现如下图所示的正方形布局

或者存在任何相关的包

---

我正在使用ScrollView和flexbox的组合来实现我的静态网格视图

import {Dimensions} from 'react-native';

....

return (
  <ScrollView>
    <View style={styles.container}>
      {
        this.props.categories.map((category, index) => {
          return (
            <TouchableOpacity
              key={index}
              style={styles.item}
              onPress={() => {}}
            >
              <Image
                style={styles.itemIcon}
                source="..."
              />
              <Text style={styles.itemTitle}>
                {category.name}
              </Text>
            </TouchableOpacity>
          )
        })
      }
    </View>
  </ScrollView>
)

var styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        width: Dimensions.get('window').width * 0.5,
        height: 100,
        borderWidth: 1,
        borderColor: "lightgray",
        alignItems: 'center',
        justifyContent: 'center'        
    },
    itemIcon: {
        width: 100,
        height: 100,
        resizeMode: 'contain'
    },
    itemTitle: {
        marginTop: 16,
    },
});

从'react native'导入{Dimensions}；
....
返回(
{
this.props.categories.map（（类别，索引）=>{
返回(
{}}
>
{category.name}
)
})
}
)
var styles=StyleSheet.create({
容器：{
flexDirection:'行'，
flexWrap:“wrap”
},
项目：{
宽度：尺寸。获取（“窗口”）。宽度*0.5，
身高：100，
边框宽度：1，
边框颜色：“浅灰色”，
对齐项目：“居中”，
为内容辩护：“中心”
},
项目图标：{
宽度：100，
身高：100，
resizeMode:“包含”
},
项目名称：{
玛金托普：16，
},
});

我在谷歌上搜索同一个问题，找到了一个更简单的解决方案。只需使用

aspectRatio:1

style属性。请参阅一个示例：

将RN自己的

FlatList

组件与

numofolumns={3}

prop一起使用。如果视图是静态的，可以禁用滚动。如何处理3列<代码>尺寸。获取（'window'）。宽度*0.3333…？是的，您可以将宽度设置为

尺寸。获取（'window'）。宽度*0.33

这不会使项目成为方形，因为

宽度

并不总是

100

，就像

高度

。