React Native布局之FlexBox

2018-02-06 12:18:56 浏览数 (1)

概述

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

换行，第一行在下方

代码示例

代码语言：javascript复制
<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的设备像素。 如：

代码语言：javascript复制
<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

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

代码示例：

代码语言：javascript复制
<View        style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

alignItems

属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。 属性请参照本文开头的讲解。 代码示例：

代码语言：javascript复制
<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

元素位于容器的结尾

代码示例：

代码语言：javascript复制
<View style={ {alignSelf:'baseline',width:60,height:    20,backgroundColor:"darkcyan",margin:5}}>
   <Text style={ {fontSize:16}}>1</Text>
</View>

flex

该属性定义了一个可伸缩元素的能力，默认为0。类似于比重这么一个概念（因其位于父视图下面，所以比重相当于所占的百分比）。

代码示例：

代码语言：javascript复制
<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

生成相对定位的元素，相对于其正常位置进行定位

reactnative

0 人点赞