React Native布局

➕这一步,再搞懂这几步React Native才算入门

FlexBox

Flexbox 是前端开发的一种布局方案，开发效率快，屏幕适配性极高，React Native也使用了这种布局方案。

它有四个重要的概念：

1. 弹性容器（flex container）：可以理解为是父视图

2. 弹性项目(flex item) ：可以理解为是子视图

3. 主轴(main axis) ： 排列方向

4. 侧轴/交叉轴(cross axis) ： 与排列方向垂直的方向

   ​

图片 1

弹性容器的属性

我们可以通过调整弹性容器的属性来实现对弹性项目的各种布局方式，主要使用的弹性容器的属性有下面四个：

• flexDirection ：控制主轴(main axis)的方向
• flexWrap ：是否换行
• justifyContent : 子视图主轴(main axis)上的对齐方式
• alignItems ：子视图在交叉轴(cross axis)上如何对齐
• alignSelf：item自己在交叉轴(cross axis)上的对齐方式，会覆盖默认的对齐方式

属性名	取值
flexDirection	row, row-reverse, column, column-reverse
flexWrap	wrap, nowrap
justifyContent	flex-start, flex-end, center, space-between, space-around
alignItems	flex-start, flex-end, center, stretch
alignSelf	auto, flex-start, flex-end, center, stretch

分别看一下这四种属性：

1. flexDirection

使用该属性可以控制主轴的方向：

图片 2

• row ：主轴为水平方向，起点在左端。
• row-reverse ：主轴为水平方向，起点在右端。
• column（默认值） ：主轴为垂直方向，起点在上沿。
• column-reverse ：主轴为垂直方向，起点在下沿

2. flexWrap

使用该属性可以决定弹性项目是否换行

flexWrap:'nowrap':不换行

3333

flexDirection:'row'
flexWrap:'wrap':换行，第一行在上方

4444

RN 不支持这个：没有wrap-reverse/flex-reverse属性

image.png

3. justifyContent

使用该属性可以决定弹性项目主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

6

4. alignItems

使用该属性可以决定弹性项目在交叉轴上如何对齐

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline:项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。设置高度效果和flex-start一致

效果图(如下):baseline跟某些博客上有出入，应该又搞错了

image.png

image.png

baseline跟是否指定控件高度没有关系

image.png

image.png

5.alignSelf

flex-start和auto效果一样，stretch的效果与是否设置高度有关

    
                        text1
    
                        text2
    
                        text3
    
                        text4

image.png

stretch去除高度效果图

    
                        text1
    
                        text2
    
                        text3
    
                        text4

image.png

其他样式跟css样式类似,这里也给出个学习地址