React Native布局之FlexBox
概述
FlexBox(弹性框布局):英文全称the flexible box Module,FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。 其主要思想是:让容器有能力让其子项目能够改变其宽度|高度|顺序,以最佳方式填充可用空间。在布局中,首先得确定主轴方向(flexDirection),主轴组件的对齐方式(justifyContent),侧轴组件的对齐方式(alignItems),通过以上四点可以基本确定布局。 注:FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支持Flexbox。
在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸,显示的效果。
FlexBox属性
为了更好的理解与应用FlexBox,我们先看一下FlexBox所具有的属性。
主轴和侧轴(横轴和竖轴)
在学习属性之前,让我们先了解一个概念:主轴和侧轴。
如图:主轴即水平方向的轴线,可以理解成横轴,侧轴垂直于主轴,可以理解为竖轴。
flexDirection 该属性确定了主轴方向。
属性名 |
说明 |
---|---|
row(默认) |
主轴方向为水平,起点在左端 |
row- reverse |
主轴方向为水平,起点在右端 |
column |
主轴方向为垂直,起点在上端 |
column-reverse |
主轴方向为垂直,起点在下端 |
justifyContent 该属性确定了组件在主轴方向上的对齐方式。
属性名 |
说明 |
---|---|
flex-start(默认) |
组件沿着主轴方向的起始位置靠齐 |
flex-end |
组件沿着主轴方向的结束位置靠齐,和flex-start相反 |
space-between |
组件在主轴方向上两端对齐,其中的间隔相等 |
space-around |
组件会平均分配在主轴方向上,两端保留一定的位置空间 |
alignItems 该属性确定了组件在侧轴方向上的对齐方式。
属性名 |
说明 |
---|---|
flex-start |
组件沿着侧轴上的起点对齐 |
flex-end |
组件沿着侧轴上的终点对齐 |
center |
组价在侧轴方向上居中对齐 |
stretch(默认) |
组件在侧轴方向上占满 |
flexWrap 该属性主要用作换行,默认情况下,项目都排列在一条线上,放不下的部分则不放置,flexWap就是定义是否换行的。。
属性名 |
说明 |
---|---|
nowrap(默认) |
不换行 |
wrap |
换行,第一行在上方 |
wrap-reverse |
换行,第一行在下方 |
代码示例
<View style={ {flexDirection:'row-reverse',backgroundColor:"darkgray",marginTop:20}}>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>1</Text>
</View>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>2</Text>
</View>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>3</Text>
</View>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>4</Text>
</View>
</View>
宽和高
在React Native中尺寸是没有单位的,它代表了设备独立像素。有点类似于Android的设备像素。 如:
<View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}>
<Text style={ {fontSize:16,margin:20}}>尺寸</Text>
</View>
上诉代码:运行在Android上时,View的长和宽被解释成:100dp 100dp单位是dp,字体被解释成16sp 单位是sp,运行在iOS上时尺寸单位被解释称了pt,这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变。
RN的FlexBox和css的FlexBox的异同
虽然React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一样的。但是在某些方面还是有细微区别的:
- flexDirection: React Native中默认为flexDirection:’column’,在Web CSS中默认为flex-direction:’row’
- alignItems: React Native中默认为alignItems:’stretch’,在Web CSS中默认align-items:’flex-start’
- flex: React Native中flex只接受一个参数,而Web Css的flex可以接受多参数,如:flex: 2 2 10%
- RN不支持属性:align-content,flex-basis,order,flex-basis,flex-flow,flex-grow,flex-shrink
React Native
React Native布局属性
以下属性是React Native所支持的Flex属性。
父视图属性(容器属性):
- flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)
- flexWrap enum(‘wrap’, ‘nowrap’)
- justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
- alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
justifyContent
该属性定义了浏览器如何分配顺着父容器主轴的弹性(flex)元素之间及其周围的空间,默认为flex-start。
属性名 |
说明 |
---|---|
flex-start(默认) |
从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐 |
flex-end |
从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐。 |
center |
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。 |
space-between |
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。 |
space-around |
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 |
代码示例:
<View style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>
alignItems
属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐,默认为stretch。 属性请参照本文开头的讲解。 代码示例:
<View style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>
子视图属性
alignSelf
该属性以属性定义了flex容器内被选中项目的对齐方式。注意:alignSelf 属性可重写灵活容器的 alignItems 属性。
属性名 |
说明 |
---|---|
auto(默认) |
元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch” |
stretch |
元素被拉伸以适应容器 |
center |
元素位于容器的中心 |
flex-start |
元素位于容器的开头 |
flex-end |
元素位于容器的结尾 |
代码示例:
<View style={ {alignSelf:'baseline',width:60,height: 20,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>1</Text>
</View>
flex
该属性定义了一个可伸缩元素的能力,默认为0。类似于比重这么一个概念(因其位于父视图下面,所以比重相当于所占的百分比)。
代码示例:
<View style={ {flexDirection:'row',height:40, backgroundColor:"darkgray",marginTop:20}}>
<View style={ {flex:1,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>flex:1</Text>
</View>
<View style={ {flex:2,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>flex:2</Text>
</View>
<View style={ {flex:3,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>flex:3</Text>
</View>
</View>
其他属性
视图边框
属性名 |
说明 |
---|---|
borderBottomWidth |
底部边框宽度 |
borderLeftWidth |
左边框宽度 |
borderRightWidth |
右边框宽度 |
borderTopWidth |
顶部边框宽度 |
borderWidth |
边框宽度 |
border(Bottom|Left|Right|Top)Color |
边框颜色 |
外边框
属性名 |
说明 |
---|---|
margin |
外边距 |
marginBottom |
下外边距 |
marginHorizontal |
左右外边距 |
marginLeft |
左外边距 |
marginRight |
右外边距 |
marginTop |
上外边距 |
marginVertical |
上下外边距 |
内边框
属性名 |
说明 |
---|---|
padding |
内边距 |
paddingBottom |
下内边距 |
paddingHorizontal |
左右内边距 |
paddingLeft |
左内边距 |
paddingRight |
右内边距 |
paddingTop |
上内边距 |
paddingVertical |
上下内边距 |
边缘
属性名 |
说明 |
---|---|
left |
元素的左边缘 |
right |
元素的右边缘 |
top |
元素的上边缘 |
bottom |
元素的下边缘 |
元素定位
属性名 |
说明 |
---|---|
absolute |
生成绝对定位的元素,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 |
relative |
生成相对定位的元素,相对于其正常位置进行定位 |
- BZOJ1468: Tree
- 洛谷P3806 【模板】点分治1
- 探索ASP.NET MVC5系列之~~~5.缓存篇(页面缓存+二级缓存)
- 洛谷P3383 【模板】线性筛素数(Miller_Rabin)
- BZOJ3667: Rabin-Miller算法
- Numpy 修炼之道 (2)—— N维数组 ndarray
- python爬虫入门(五)Selenium模拟用户操作
- python爬虫入门(六) Scrapy框架之原理介绍
- lambda表达式杂谈
- python爬虫入门(七)Scrapy框架之Spider类
- python爬虫入门(八)Scrapy框架之CrawlSpider类
- python爬虫入门(九)Scrapy框架之数据库保存
- Numpy 修炼之道(1) —— 什么是 Numpy
- TensorFlow修炼之道(3)——计算图和会话(Graph&Session)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法