如何实现如下图的方形布局?
还是存在任何相关的软件包?
我在谷歌上搜索同样的问题并找到了一个更简单的解决方案。只需使用aspectRatio: 1
样式属性。看一个例子:https ://reactnative.fun/2017/06/21/ratio/
我正在使用 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,
},
});