1,来张分析图
Paste_Image.png
组件
<View style={styles.views}>
<View style={styles.view1}></View>
<View style={styles.view2}></View>
<View style={styles.view3}></View>
</View>
样式,在const styles = StyleSheet.create({});方法写
views:{
flex:1,
backgroundColor: '#DCDCDC',
//flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。
flexDirection: 'row',//竖直轴(column)
//justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end space-around以及space-between。
justifyContent: 'flex-start',//flex-start、center、flex-end、space-around以及space-between
//alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
alignItems: 'center',//flex-start、center、flex-end以及stretch。
},
view1:{
// flex:1,
width:100,//Dimensions.get('window').width
backgroundColor:'plum',
height:100,
},
view2:{
// flex:1,
backgroundColor:'paleturquoise',
height:100,
width:100,
},
view3:{
// flex:1,
backgroundColor:'palegoldenrod',
height:100,
width:100,
},
