前言
通過(guò)上一篇的學(xué)習(xí)担锤，我們可以了解到RN的基本開(kāi)發(fā)模式蔚晨，在你開(kāi)始這篇文章之前，建議你先將上一篇的內(nèi)容給多敲幾遍肛循，盡量能夠做到自己?jiǎn)为?dú)敲出來(lái)一個(gè)組件以及樣式表铭腕。其他廢話(huà)就不多說(shuō)了，接下來(lái)介紹我們本篇的內(nèi)容：
- 體驗(yàn)FlexBox布局
- FlexBox布局
- 獲取屏幕寬度
- 組件的定位
一多糠、體驗(yàn)FlexBox布局
我們之前做的web布局都是基于盒子模型累舷，而現(xiàn)在我們有一種全新的布局方式-flex布局，它又叫做彈性盒模型夹孔，指在通過(guò)彈性的方式來(lái)對(duì)齊和分布容器中的內(nèi)容被盈，使其能使用不同屏幕，為盒模型提供最大的靈活性搭伤，目前他已經(jīng)得到了所有瀏覽器的支持只怎。
上面說(shuō)的是官話(huà)，說(shuō)實(shí)話(huà)我剛看到上面的解釋也是一臉懵逼怜俐，等你正在懂了什么叫彈性布局身堡，你再回來(lái)看這段話(huà)，你會(huì)發(fā)現(xiàn)還是一臉懵逼拍鲤。下面我使用使用iOS的布局方式贴谎、HTML的布局方式汞扎，RN的彈性布局方式，實(shí)現(xiàn)如下效果擅这。通過(guò)對(duì)比的方式首先來(lái)讓大家體驗(yàn)一下彈性布局澈魄。
iOS的布局方式
不懂iOS開(kāi)發(fā)的可以直接跳過(guò),這里僅僅是讓iOS開(kāi)發(fā)人員做對(duì)比
HTML的布局方式
這個(gè)看不懂的自行學(xué)習(xí)去
RN的布局方式
HTML方式和RN方式的對(duì)比
HTML方式首先要做的是設(shè)置html和body的寬和高是100%，然后在設(shè)置父元素的高寬為100%,RN只需設(shè)置父組件的組件的樣式屬性flex為1
HTML設(shè)置水平方向的居中方式是把需要居中的子元素都設(shè)置為margin：0 atuo仲翎，RN只需父組件的樣式屬性justifyContents:"center"痹扇，便可實(shí)現(xiàn)父組件中所有的子組件都水平居中
HTML設(shè)置垂直居中方式是子元素設(shè)置margin:auto;postion:absolute;top:0;left:0;bottom:0;right:0;并且該子元素要設(shè)置寬和高，RN只需父組件的樣式屬性alignItems:"center"谭确，便可實(shí)現(xiàn)所有的子組件都垂直居中
上面RN的布局方式就是我們上面提到的FlexBox布局也叫作彈性盒模型帘营。可以不僅大大減少我們布局的代碼量逐哈，而且使我們的布局邏輯更加清晰。
二问顷、FlexBox布局
flexbox布局主要思想
父組件讓子組件能夠改變他的寬高昂秃，以最佳方式來(lái)填充可用空間。
flexbox布局原理
每個(gè)組件默認(rèn)存在兩根軸
- 主軸: 默認(rèn)是垂直方向
- 側(cè)軸(交叉軸)：跟主軸的方向始終是垂直狀態(tài)
flexbox中最基本的四個(gè)樣式屬性
-
flexDirection - 決定該組件主軸的方向
- row: 主軸為水平方向
- column：主軸為垂直方向
-
justifyContent - 定義該組件的所有子組件在主軸線(xiàn)的對(duì)其方式
- flex-start: 組件的子組件向主軸的起始位置靠齊
- flex-end: 組件的子組件向主軸的結(jié)束位置靠齊
- center: 組件的子組件向主軸的中間位置靠齊
- space-between: 組件的子組件向主軸的兩端對(duì)齊杜窄，項(xiàng)目之間的間隔都相等
- space-around:組件的子組件平均的分布主軸肠骆，兩端保留子組件間隔的一半。
justifyContent詳解
-
alignItems - 定義該組件的所有子組件在側(cè)軸線(xiàn)的對(duì)其方式
flex-start:交叉軸的起點(diǎn)對(duì)齊
flex-end:交叉軸的終點(diǎn)對(duì)齊
center:交叉軸的中點(diǎn)對(duì)齊
-
stretch:如果項(xiàng)目未設(shè)置高度或者auto,將占滿(mǎn)整個(gè)容器的高度
alignItems詳解
-
flexWrap - 讓組件的子組件都排在一條線(xiàn)
- nowrap(默認(rèn)值)：不換行
- wrap: 換行
注：如果設(shè)置wrap不起作用塞耕，是因?yàn)榘姹镜膯?wèn)題蚀腿，此時(shí)只需給他設(shè)置一個(gè)alignItems屬性
flex-wrap.jpg
flexbox中其他幾個(gè)樣式屬性
-
flex - 設(shè)置組件的寬度，高度默認(rèn)100%
11.png下面我解釋一下上面圖的原理
- 上圖紅色是父組件扫外，寬度為350莉钙，他的子組件分別是粉色、橘黃色筛谚、藍(lán)色磁玉、灰色。
- 灰色的寬是固定50驾讲，此時(shí)紅色剩余的可用寬度為350-50=300
- 其他三個(gè)色塊都是通過(guò)flex來(lái)設(shè)置寬度蚊伞，他們的flex分別是1,2,3,此時(shí)表明，粉色吮铭、橘黃色时迫、綠色他們要分掉紅色剩余的寬度。
- 分的方式如下：把300分成7(三個(gè)色塊的flex值相加)份谓晌，粉色占1份掠拳，橘黃色占2份，綠色占3份扎谎。
-
alignSelf - 設(shè)置某個(gè)子組件在側(cè)軸的對(duì)齊方式
可覆蓋align-items屬性,默認(rèn)值為auto碳想，表示繼承父元素的align-items屬性烧董，如果沒(méi)有父元素，則等同于stretch胧奔。
auto/flex-start/flex-end/center/stretch
三逊移、獲取屏幕的寬高
首先需要獲取到系統(tǒng)的Dimensions類(lèi)庫(kù)
var dimensions = require("Dimensions");通過(guò)ES6的結(jié)構(gòu)賦值獲取值(不懂結(jié)構(gòu)賦值的自行百度啊)
var {width,height} = dimensions.get("window");或者通過(guò)ES5來(lái)獲取
var width = dimensions.get("window").width;
var height = dimensions.get("window").height;
四、絕對(duì)定位與相對(duì)定位
與CSS的定位基本一直龙填，下面我主要提一下不同的地方
RN中的決定定位不需要再讓父組件處于定位狀態(tài)了
而且如果父組件設(shè)置了內(nèi)邊距胳泉，relative會(huì)做出相應(yīng)的定位改變,而absolute則不會(huì)
