我对React native比较陌生,不确定如何实现此设计:
Grid layout
我有20 px的水平填充整个应用程序,我想调整这些方块的大小,使他们形成像一个大矩形与这些差距之间。我真的不想硬编码这些大小。
我把总宽度除以3,然后给大正方形2/3,给小正方形1/3,这样就得到了没有任何间隙的设计。但是,有间隙的情况下,我该怎么做呢?
const themedStyles = useThemedStyles();
const width = Dimensions.get('window').width - 40;
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<ThemedText style={themedStyles.subHeader}>Trending</ThemedText>
<ThemedText style={[themedStyles.accentText, {fontWeight: 'bold'}]}>
See all
</ThemedText>
</View>
<View style={styles.cardContainer}>
<View
style={{
width: (width / 3) * 2,
height: (width / 3) * 2,
backgroundColor: 'white',
borderWidth: 2,
}}></View>
<View>
<View
style={{
width: width / 3,
height: width / 3,
backgroundColor: 'white',
borderWidth: 2,
}}></View>
<View
style={{
width: width / 3,
height: width / 3,
backgroundColor: 'white',
borderWidth: 2,
}}></View>
</View>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
},
textContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
},
cardContainer: {
flexDirection: 'row',
},
});
1条答案
按热度按时间gz5pxeao1#
看下面的代码,也许它会帮助你: