我在使用Flex Box时遇到问题,正在尝试获取这种类型的Grid View:
我尝试了一堆没有运气的职位,我尝试的最后一个职位是:
return (
<>
<View style={styles.container}>
<View style={styles.column}>
<View style={styles.row}>
<View style={[styles.box, { backgroundColor: 'yellow' }]} />
</View>
</View>
<View style={styles.column}>
<View style={[styles.box, { backgroundColor: 'green' }]} />
<View style={[styles.box, { backgroundColor: 'lightblue' }]} />
</View>
<View style={styles.space_between_columns} />
<View style={styles.column}>
<View style={[styles.box, { backgroundColor: 'grey' }]} />
<View style={[styles.box, { backgroundColor: 'purple' }]} />
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
row: {
flexDirection:'row',
justifyContent:'space-between',
alignItems:'center',
height:200,
width:50
},
column: {
flexDirection:'column',
justifyContent:'space-between',
alignItems:'center',
height:200,
width:50
},
space_between_columns:{
width:100
},
box: {
height:50,
width:50
}
});
但是,它没有像我想要的那样在顶部给出我,而是像这样:
有任何想法吗?
亲切的问候
工作应用程式:Expo Snack
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.text}>Header</Text>
</View>
<View style={{ padding: 10, flex: 1 }}>
<View style={styles.topSection}>
<Text style={styles.text}>Top Section</Text>
</View>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.leftColumn}>
<Text style={styles.text}>Left Column</Text>
</View>
<View style={styles.rightColumn}>
<Text style={styles.text}>Right Column</Text>
</View>
</View>
<View
style={{
height: 70,
flexDirection: 'row',
}}>
<View style={styles.subLeft}>
<Text style={styles.text}>Sub Left</Text>
</View>
<View style={styles.subRight}>
<Text style={styles.text}>Sub Right</Text>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'start',
backgroundColor: 'black',
},
header: {
height: 100,
backgroundColor: 'lightblue',
justifyContent: 'center',
},
topSection: {
height: 70,
backgroundColor: 'yellow',
justifyContent: 'center',
},
leftColumn: {
flex: 1,
backgroundColor: 'green',
justifyContent: 'center',
},
rightColumn: {
flex: 1,
backgroundColor: 'lightblue',
justifyContent: 'center',
},
subLeft: {
flex: 1,
backgroundColor: 'grey',
justifyContent: 'center',
},
subRight: {
flex: 1,
backgroundColor: 'purple',
justifyContent: 'center',
},
text: {
alignSelf: 'center',
color: 'black',
fontWeight: '800',
fontSize: 20,
},
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句