从零学React Native之06flexbox布局.docxVIP

从零学React Native之06flexbox布局 　　什么是flexbox布局 　　React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为flexbox是CSS领域类似Android中 LinearLayout的一种布局，但是要比 LinearLayout要强大的多。 　　React Native中对Web端的FlexBox进行了阉割,以用来适应移动设备。 　　RN利用flexBox模型布局, 也就是在手机屏幕上对组件进行排列.利用flexBox模型,开发者可以开发出动态宽高的自适应的UI布局。 　　我们前面介绍过View,Text等组件的一些属性设置了,RN强大的UI布局能力主要是通过各个不同组件的样式(style)属性中的各个键的设置来实现的。大部分组件的style都支持flexbox布局。 　　下面就是我们常见的布局的写法： ... class AwesomeProject extends Component { render() { return ( View style={styles.container} //根View View style={styles.test1}/ // 子View View style={styles.test2}/ // 子View /View ); } } const styles = 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中的样式主要有以下几类: 　　位置及宽、高相关的样式键 　　容器属性,决定子组件排列规则的键 　　元素属性,决定组件显示规则的键 　　边框、空隙与填充 　　位置及宽、高相关的样式键 　　位置主要是postion、 top 、bottom、 left、 right 几个属性 　　首先讨论position键。它是字符串类型，取值包括 relative(默认)或者absolute,表示当前描述的位置是相对定位还是绝对定位. 　　top 、bottom、 left、 right 四个键是数值类型. 　　当position的值为absolute时,描述就指的是当前组件的位置距离父组件最上(下、左、右)有多少pt. 　　当position的键为relative时,不可以使用bottom和right,top和left键默认值为0.top和left表示当前组件距离上一个同级组件的最上(左)有多少pt 　　宽高包括: width、height、maxHeight、maxWidth、minHeight、minWidth 都是数值类型,因为使用flexbox布局,组件的款和高是可以动态改变的,所以可以设置宽和高的最大和最小值 　　容器属性,决定子组件排列规则的键 　　flexDirection: 　　flexDirection键决定了组件内部的子组件是如何排列的, 取值可以为: row,column,类似Android中LinearLayout的orientation属性. 　　row：横向排列，主轴为水平方向; 　　column：竖直排列，主轴为垂直方向。 　　lexDirection 　　flexWrap: 　　flexWrap字符串类型,可选wrap和nowrap(默认值) 　　水平或垂直布局时,如果子View放不下，则自动换行, 默认为nowrap(不换行) 　　flexWrap 　　justifyContent： 　　设置子布局在主轴方向位置 　　justifyContent 　　alignItems： 　　定义了View组件中所有子组件的对齐规则. 有4种可能的字符串类型的值: 　　flex-start 顶部对齐 　　flex-end 底部对齐 　　center 中部对齐