React Native04 - FlexBox布局、获取屏幕宽
前言
通过上一篇的学习，我们可以了解到RN的基本开发模式，在你开始这篇文章之前，建议你先将上一篇的内容给多敲几遍，尽量能够做到自己单独敲出来一个组件以及样式表。其他废话就不多说了，接下来介绍我们本篇的内容：
- 体验FlexBox布局
- FlexBox布局
- 获取屏幕宽度
- 组件的定位
一、体验FlexBox布局
-
我们之前做的web布局都是基于盒子模型，而现在我们有一种全新的布局方式-flex布局，它又叫做弹性盒模型，指在通过弹性的方式来对齐和分布容器中的内容，使其能使用不同屏幕，为盒模型提供最大的灵活性，目前他已经得到了所有浏览器的支持。
-
上面说的是官话，说实话我刚看到上面的解释也是一脸懵逼，等你正在懂了什么叫弹性布局，你再回来看这段话，你会发现还是一脸懵逼。下面我使用使用iOS的布局方式、HTML的布局方式，RN的弹性布局方式，实现如下效果。通过对比的方式首先来让大家体验一下弹性布局。
iOS的布局方式
不懂iOS开发的可以直接跳过,这里仅仅是让iOS开发人员做对比
iOS的布局方式.png
HTML的布局方式
这个看不懂的自行学习去
RN的布局方式
RN布局方式.png
HTML方式和RN方式的对比
-
HTML方式首先要做的是设置html和body的宽和高是100%，然后在设置父元素的高宽为100%,RN只需设置父组件的组件的样式属性flex为1
-
HTML设置水平方向的居中方式是把需要居中的子元素都设置为margin：0 atuo，RN只需父组件的样式属性justifyContents:"center"，便可实现父组件中所有的子组件都水平居中
-
HTML设置垂直居中方式是子元素设置margin:auto;postion:absolute;top:0;left:0;bottom:0;right:0;并且该子元素要设置宽和高，RN只需父组件的样式属性alignItems:"center"，便可实现所有的子组件都垂直居中
-
上面RN的布局方式就是我们上面提到的FlexBox布局也叫作弹性盒模型。可以不仅大大减少我们布局的代码量，而且使我们的布局逻辑更加清晰。
二、FlexBox布局
flexbox布局主要思想
父组件让子组件能够改变他的宽高，以最佳方式来填充可用空间。
flexbox布局原理
每个组件默认存在两根轴
- 主轴: 默认是垂直方向
- 侧轴(交叉轴)：跟主轴的方向始终是垂直状态
flexbox中最基本的四个样式属性
-
flexDirection - 决定该组件主轴的方向
- row: 主轴为水平方向
- column：主轴为垂直方向
flexDirection详解
-
justifyContent - 定义该组件的所有子组件在主轴线的对其方式
- flex-start: 组件的子组件向主轴的起始位置靠齐
- flex-end: 组件的子组件向主轴的结束位置靠齐
- center: 组件的子组件向主轴的中间位置靠齐
- space-between: 组件的子组件向主轴的两端对齐，项目之间的间隔都相等
- space-around:组件的子组件平均的分布主轴，两端保留子组件间隔的一半。
justifyContent详解
-
alignItems - 定义该组件的所有子组件在侧轴线的对其方式
-
flex-start:交叉轴的起点对齐
-
flex-end:交叉轴的终点对齐
-
center:交叉轴的中点对齐
-
stretch:如果项目未设置高度或者auto,将占满整个容器的高度
alignItems详解
-
-
flexWrap - 让组件的子组件都排在一条线
- nowrap(默认值)：不换行
- wrap: 换行
注：如果设置wrap不起作用，是因为版本的问题，此时只需给他设置一个alignItems属性
flex-wrap.jpg
flexbox中其他几个样式属性
-
flex - 设置组件的宽度，高度默认100%
11.png
下面我解释一下上面图的原理
- 上图红色是父组件，宽度为350，他的子组件分别是粉色、橘黄色、蓝色、灰色。
- 灰色的宽是固定50，此时红色剩余的可用宽度为350-50=300
- 其他三个色块都是通过flex来设置宽度，他们的flex分别是1,2,3,此时表明，粉色、橘黄色、绿色他们要分掉红色剩余的宽度。
- 分的方式如下：把300分成7(三个色块的flex值相加)份，粉色占1份，橘黄色占2份，绿色占3份。
-
alignSelf - 设置某个子组件在侧轴的对齐方式
-
可覆盖align-items属性,默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
-
auto/flex-start/flex-end/center/stretch
-
三、获取屏幕的宽高
-
首先需要获取到系统的Dimensions类库
var dimensions = require("Dimensions"); -
通过ES6的结构赋值获取值(不懂结构赋值的自行百度啊)
var {width,height} = dimensions.get("window"); -
或者通过ES5来获取
var width = dimensions.get("window").width;
var height = dimensions.get("window").height;
四、绝对定位与相对定位
与CSS的定位基本一直，下面我主要提一下不同的地方
-
RN中的决定定位不需要再让父组件处于定位状态了
-
而且如果父组件设置了内边距，relative会做出相应的定位改变,而absolute则不会
