flex布局
export default class App extends Component<> {
render() {
return (
<View sytle={styles.container}>
<View style={styles.child1}>
</View>
<View style={styles.childe2}>
</View>
</View>
);
}
}
/*
参考 css 盒式布局
*/
var styles = StyleSheet.create({
container:{
margin:30,
width:300,
height:500,
backgroundColor:"yellow",
//主轴方向,默认为column,
//设置为横向排列
flexDirection:"row",
//主轴方向
justifyContent:"center",
//交叉轴
alignItems:"center"
},
child1:{
width:100,
height:100,
backgroundColor:"green"
},
childe2:{
width:100,
height:100,
backgroundColor:"blue"
}
});
/* flex (对齐方式)
* 可以给组件指定flex, flex的值是数字
* flex:1 表示组件可以撑满父组件所有的剩余空间
* 若同时存在多个并列的子组件,flex:1 则均分
* 若子组件的flex的值不等, 增flex的值越大,则谁占的空间比例就大(占用剩余空间比=flex值比)
*
* 练习
*
*
* */
var styles = StyleSheet.create({
container:{
margin:30,
flex:1,//撑满整个窗口
backgroundColor:"yellow"
},
child1:{
flex:1,
backgroundColor:"green",
},
chile2:{
flex:1,
backgroundColor:"red"
}
});