来自Leo的原创博客,转载请著名出处
我的stackoverflow
前言
FlexBox布局是React Native的布局核心,鉴于自己对FlexBox还有很多概念不太清楚,这篇文章就当成是总结,并且分享出来给大家。
FlexBox布局能够帮助你更好的帮助你控制控件的大小和位置,Flexbox非常适合Mobile端的适配,我想这也是FaceBook为什么选择FlexBox作为React Native布局的原因吧。
本文参考文章如下
当然,React Native官网也有FlexBox相关的文档,不过讲解的内容不多。
!!!!React Native的迭代更新很快,所以如果有读者发现了本文代码不适配新版本了,欢迎评论,我会及时修改。
Getting Start
react-native init LearnFlexBox
运行
cd LearnFlexBox/
react-native run-ios
会看到默认的截图
由于模拟器截图实在太宽,所以本文把Demo范围限定在一个小的范围内
重写Render方法
render() {
return (
<View style={styles.container}>
<View style={styles.exampleContainer}>
</View>
</View>
);
}
这里的exampleContainer风格如下
exampleContainer:{
width:320,
height:200,
backgroundColor:'gray'
}
Container和Item
- Container就是容器,有些属性是设置到Container上的例如alignItems。设置到Container上的属性决定了如何布局内部的Item
- Item, 在容器中的子视图。设置到Item上的属性,决定了自己在Container中的位置大小
有过iOS或者安卓原生开发的同学应该能有个更清楚的认识,很像View和Subview的关系
flexDirection
这个Container属性决定了按照哪个方向来布局Item,默认从上到下
添加一个style
exampleItem:{
width:30,
height:30,
backgroundColor:'#27E6E2'
}
然后,在添加三个子视图
<View style={styles.exampleContainer}>
<View style={styles.exampleItem}></View>
<View style={styles.exampleItem}></View>
<View style={styles.exampleItem}></View>
</View>
然后,修改exampleContainer
,添加一个属性flexDirection
exampleContainer:{
width:320,
height:200,
backgroundColor:'gray',
flexDirection:'column'
},
当flexDirection设置为column
的时候效果
当flexDirection设置为row
的时候
注意:React Native的Flexbox目前不支持row-reverse和column-reverse
alignItems-垂直轴上的位置关系
有四个值
'flex-start', 'flex-end', 'center', 'stretch'
示例代码如下
<View style={
{
width:320,height:200,backgroundColor:'gray',alignItems:'stretch',flexDirection:'row'}}>
<View style={
{
width:50,backgroundColor:'green'}}>