React Native04 - FlexBox布局、获取屏幕宽高、定位

前言

通过上一篇的学习，我们可以了解到RN的基本开发模式，在你开始这篇文章之前，建议你先将上一篇的内容给多敲几遍，尽量能够做到自己单独敲出来一个组件以及样式表。其他废话就不多说了，接下来介绍我们本篇的内容：

• 体验FlexBox布局
• FlexBox布局
• 获取屏幕宽度
• 组件的定位

一、体验FlexBox布局

• 我们之前做的web布局都是基于盒子模型，而现在我们有一种全新的布局方式-flex布局，它又叫做弹性盒模型，指在通过弹性的方式来对齐和分布容器中的内容，使其能使用不同屏幕，为盒模型提供最大的灵活性，目前他已经得到了所有浏览器的支持。

• 上面说的是官话，说实话我刚看到上面的解释也是一脸懵逼，等你正在懂了什么叫弹性布局，你再回来看这段话，你会发现还是一脸懵逼。下面我使用使用iOS的布局方式、HTML的布局方式，RN的弹性布局方式，实现如下效果。通过对比的方式首先来让大家体验一下弹性布局。

iOS的布局方式

不懂iOS开发的可以直接跳过,这里仅仅是让iOS开发人员做对比

iOS的布局方式.png

HTML的布局方式

这个看不懂的自行学习去

RN的布局方式

RN布局方式.png

HTML方式和RN方式的对比

1. HTML方式首先要做的是设置html和body的宽和高是100%，然后在设置父元素的高宽为100%,RN只需设置父组件的组件的样式属性flex为1

2. HTML设置水平方向的居中方式是把需要居中的子元素都设置为margin：0 atuo，RN只需父组件的样式属性justifyContents:"center"，便可实现父组件中所有的子组件都水平居中

3. HTML设置垂直居中方式是子元素设置margin:auto;postion:absolute;top:0;left:0;bottom:0;right:0;并且该子元素要设置宽和高，RN只需父组件的样式属性alignItems:"center"，便可实现所有的子组件都垂直居中

4. 上面RN的布局方式就是我们上面提到的FlexBox布局也叫作弹性盒模型。可以不仅大大减少我们布局的代码量，而且使我们的布局逻辑更加清晰。

二、FlexBox布局

flexbox布局主要思想

父组件让子组件能够改变他的宽高，以最佳方式来填充可用空间。

flexbox布局原理

每个组件默认存在两根轴

• 主轴: 默认是垂直方向
• 侧轴(交叉轴)：跟主轴的方向始终是垂直状态

flexbox中最基本的四个样式属性

1. flexDirection - 决定该组件主轴的方向

   • row: 主轴为水平方向
   • column：主轴为垂直方向

flexDirection详解

2. justifyContent - 定义该组件的所有子组件在主轴线的对其方式

   • flex-start: 组件的子组件向主轴的起始位置靠齐
   • flex-end: 组件的子组件向主轴的结束位置靠齐
   • center: 组件的子组件向主轴的中间位置靠齐
   • space-between: 组件的子组件向主轴的两端对齐，项目之间的间隔都相等
   • space-around:组件的子组件平均的分布主轴，两端保留子组件间隔的一半。
   

   justifyContent详解

3. alignItems - 定义该组件的所有子组件在侧轴线的对其方式

   • flex-start:交叉轴的起点对齐

   • flex-end:交叉轴的终点对齐

   • center:交叉轴的中点对齐

   • stretch:如果项目未设置高度或者auto,将占满整个容器的高度

     

     alignItems详解

4. flexWrap - 让组件的子组件都排在一条线

   • nowrap(默认值)：不换行
   • wrap: 换行

   注：如果设置wrap不起作用，是因为版本的问题，此时只需给他设置一个alignItems属性
   

   

   flex-wrap.jpg

flexbox中其他几个样式属性

1. flex - 设置组件的宽度，高度默认100%

   

   11.png

   下面我解释一下上面图的原理

   • 上图红色是父组件，宽度为350，他的子组件分别是粉色、橘黄色、蓝色、灰色。

   • 灰色的宽是固定50，此时红色剩余的可用宽度为350-50=300
   • 其他三个色块都是通过flex来设置宽度，他们的flex分别是1,2,3,此时表明，粉色、橘黄色、绿色他们要分掉红色剩余的宽度。

- 分的方式如下：把300分成7(三个色块的flex值相加)份，粉色占1份，橘黄色占2份，绿色占3份。      

2. alignSelf - 设置某个子组件在侧轴的对齐方式

   • 可覆盖align-items属性,默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

   • auto/flex-start/flex-end/center/stretch

三、获取屏幕的宽高

1. 首先需要获取到系统的Dimensions类库
   var dimensions = require("Dimensions");

2. 通过ES6的结构赋值获取值(不懂结构赋值的自行百度啊)
   var {width,height} = dimensions.get("window");

3. 或者通过ES5来获取
   var width = dimensions.get("window").width;
   var height = dimensions.get("window").height;

四、绝对定位与相对定位

与CSS的定位基本一直，下面我主要提一下不同的地方

• RN中的决定定位不需要再让父组件处于定位状态了

• 而且如果父组件设置了内边距，relative会做出相应的定位改变,而absolute则不会