资源描述：
《从零学React Native之06flexbox布局》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、从零学ReactNative之06flexbox布局 什么是flexbox布局 React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为flexbox是CSS领域类似Android中LinearLayout的一种布局，但是要比LinearLayout要强大的多。 ReactNative中对Web端的FlexBox进行了阉割,以用来适应移动设备。 RN利用flexBox模型布局,也就是在手机屏幕上对组件进行排列
2、.利用flexBox模型,开发者可以开发出动态宽高的自适应的UI布局。 我们前面介绍过View,Text等组件的一些属性设置了,RN强大的UI布局能力主要是通过各个不同组件的样式(style)属性中的各个键的设置来实现的。大部分组件的style都支持flexbox布局。 下面就是我们常见的布局的写法：...classAwesomeProjectextendsComponent{render(){return(//根View//子View<
3、Viewstyle={styles.test2}/>//子View);}}conststyles=StyleSheet.create({container:{//根View样式flex:1,backgroundColor:'#F5FCFF',},test1:{//子View样式width:360,height:60,backgroundColor:'red'},test2:{//子View样式width:40,height:40,backgroundColor:'blue'}}); flexbox中的样式主要有以下几类: 位置及宽、高相
4、关的样式键 容器属性,决定子组件排列规则的键 元素属性,决定组件显示规则的键 边框、空隙与填充 位置及宽、高相关的样式键 位置主要是postion、top、bottom、left、right几个属性 首先讨论position键。它是字符串类型，取值包括relative(默认)或者absolute,表示当前描述的位置是相对定位还是绝对定位. top、bottom、left、right四个键是数值类型. 当position的值为absolute时,描述就指的是当前组件的位置距离父组件最上(下、左、右)有多少pt. 当position的键为r
5、elative时,不可以使用bottom和right,top和left键默认值为0.top和left表示当前组件距离上一个同级组件的最上(左)有多少pt 宽高包括:width、height、maxHeight、maxWidth、minHeight、minWidth都是数值类型,因为使用flexbox布局,组件的款和高是可以动态改变的,所以可以设置宽和高的最大和最小值 容器属性,决定子组件排列规则的键 flexDirection: flexDirection键决定了组件内部的子组件是如何排列的,取值可以为:row,column,类似Android中
6、LinearLayout的orientation属性. row：横向排列，主轴为水平方向; column：竖直排列，主轴为垂直方向。 lexDirection flexWrap: flexWrap字符串类型,可选wrap和nowrap(默认值) 水平或垂直布局时,如果子View放不下，则自动换行,默认为'nowrap'(不换行) flexWrap justifyContent： 设置子布局在主轴方向位置 justifyContent alignItems： 定义了View组件中所有子组件的对齐规则.有4种可能的字符串类型的值:
7、flex-start顶部对齐 flex-end底部对齐 center中部对齐 stretch拉长对齐 alignItems 元素属性,决定组件显示规则的键 flex： 权重，类似Android中weight。 lex flex键的类型是数值,取值为0或者1,默认值是0,当它的值为1时,子组件将自动缩放以适应父组件剩下的空白空间. 开发者使用flex键时一定要小心,它的自动缩放意味着不仅可以改变自己的宽、高与位置,还可以通过挤压改变与它同级的其他组件的位置。 设置了flex:1的组件不是只能扩展,如果同级别固定宽高的组件在执行宽高增加
8、了,那么设置flex:1的组件就会缩小来适应同级组件的宽和高变化. align
