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

【问题标题】：How to layout with nine square view in React Native?如何在 React Native 中使用九个方形视图进行布局？
【发布时间】：2018-04-17 18:13:57
【问题描述】：

如何实现如下图的方形布局？

或者是否存在任何相关的包？

【问题讨论】：

使用 RN 自己的 FlatList 组件和 numOfColumns={3} 属性。如果该视图是静态的，您可以禁用滚动。

标签： javascript reactjs react-native flexbox react-native-flexbox

【解决方案1】：

我正在使用 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,
    },
});

【讨论】：

如何处理3列？ Dimensions.get('window').width * 0.3333...?
可以，可以设置宽度为Dimensions.get('window').width * 0.33
这不会使项目变成正方形，因为width 并不总是100，就像height。

【解决方案2】：

我在谷歌上搜索同样的问题并找到了一个更简单的解决方案。只需使用aspectRatio: 1 样式属性。看一个例子：https://reactnative.fun/2017/06/21/ratio/

【讨论】：