ReactNative之參照具體示例來看RN中的FlexBox佈局
今天是重陽節，祝大家節日快樂，今天繼續更新RN相關的部落格。上篇部落格《ReactNative之從HelloWorld中看環境搭建、元件封裝、Props及State》中我們通過一個HelloWorld的一個示例介紹了RN的環境搭建、元件封裝、Props以及States。經過這麼多天，今天我們繼續來看RN的東西，本篇部落格是關於RN的Flex佈局的，也就是說是關於RN中控制元件放哪兒的一篇部落格。在RN中使用的是Flex佈局，如果你之前接觸過Web前端的話對FlexBox佈局並不陌生，但是如果你之前沒做過Web開發的話，也不影響看今天的部落格。本篇部落格也是RN開發的基礎，算是比較重要的。
RN中控制元件的佈局方式與Web前端開發中的div+css的盒式佈局是極為相似的。本篇部落格就來詳細的講解一下RN中的FlexBox佈局，中文名“彈性佈局”。RN中的FlexBox佈局和CSS中的FlexBox大體相同，也是通過一些屬性來控制控制元件的位置、大小以及各個控制元件之間的關係。在FlexBox中分為 容器屬性（flexDirection、flexWrap、alignItems、justifyContent、alignContent）和 元素屬性（flex、alignSelf、margin、padding、border、width、height等等）。顧名思義，容器屬性是用來新增到 父元件上來控制子元件的位置的屬性，而 元素屬性則是新增到子元件本身控制本身的一種屬性。稍後會詳細介紹。
接下來我們將根據具程式碼來詳細的介紹常用的幾種FlexBox佈局的屬性,。根據常用性，下方會依次介紹RN中的Flex佈局中的flex、flexDirection、justifyContent、alignContent、flexWrap、AlignItem、AlignSelf這些常用的屬性。本篇部落格所涉及的Demo會上傳到部落格最後方的github連結中。
先入為主，下方這個gif中所有的內容就是我們今天要結束的東西，全是關於Flex佈局的。
一、Flex
首先我們先來看一下flex的使用方式，flex屬性接收的是一個number型別的值, 該值表示彈性佈局的比例係數。具體的我們還要看一下下方關於Flex的一個Demo。
下方就是flex的具體使用方式，其中的flexValue是一個number型別的值。
<View style={{ flex: flexValue />
接下來我們來看一下flex具體的一個示例。我們通過點選來修改中間的flex的值來觀察flex對每個view的影響：
-
三個黑塊中的初始的flex值為1， 所以三個黑色方塊會平分螢幕。
-
每點選一次，中間的黑塊的flex數增加1，然後我們就看到中間黑塊會增大，三個黑塊的比例變成了1 : 2 : 1。每次點選都會有變化。
最後我們來簡單的看一下該效果的實現，程式碼如下。
-
首先我們來看一下item的實現，Item即對應著每個黑塊。這個item方法有個名為flexValue的引數，該引數用來接收設定的flex的值。所以在item中我們將flexValue指定給了View的flex屬性。
-
然後我們在看一下render中的實現。在Render中，我們添加了一個View來容納item(黑塊)，View中三個item就對應著上述的三個黑塊。中間的item的flex的值是從Status中獲取的，下方會介紹到。
-
最後我們在看一個ClickView這個方法，該方法會在點選View時執行，執行該方法時，我們為Status儲存的flexValue自增了1。也就是說沒點選 1 次中間的item的flex就會增加1。所以我們最終看到的效果是沒點選一次，中間的黑塊會增大。
下方是上述示例的完整程式碼：
View Code
二、FlexDirection
看完flex屬性，接下來我們來看一下flexDirection屬性。該屬性在FlexBox佈局中也是一個尤為重要而且比較常用的一個屬性。flexDirection主要是用來控制子元素的佈局方向的，主要分為橫向佈局和縱向佈局，預設是縱向佈局（column）。下方是flexDirection的屬性值和使用方式。
屬性值：
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";用法示例：
<View style={{ flexDirection: 'row' />
flexDirection的屬性值主要有以下幾個：
-
row : '行'，該值表示子元素 自左向右橫向排列, 。如下圖的row, 先放的子元素1，如果有子元素2的話，會放到子元素1的右邊，依次類推的橫向佈局。
-
row-reverse: '逆向的行'，這個與row相反，該屬性表示 自右向左橫向排列。具體參見下圖中的row-reverse。
-
column：'列'，該屬性值表示子元素 自上而下縱向排列，具體參見下方的column。
-
column-reverse: '逆向的列'，這個與column相反，該屬性則表示 自下而上的縱向排列，具體參見下方的column-reverse。
因該部分的demo對應的程式碼比較簡單，介紹如下：
-
首先我們封裝了一個名為FlexDirectionTestView的檢視，該檢視對應著上述展示 1 2 3的檢視。該檢視對外留了一個屬性，用來接收flexDirection。外邊傳入什麼flexDirection的值，1 2 3這三個子檢視就按什麼排列。
-
在FlexDirectionTestComponent元件中，我們就呼叫了FlexDirectionTestView這個檢視，傳入了不同的flexDirection屬性，從而這個 1 2 3 子元素就會按照我們要求的樣式去展示。
完整程式碼示例：
View Code
三、JustifyContent
今天這篇部落格的乾貨還是比較足的，接下來我們來看一下第三個比較重要的屬性justifyContent。該屬性也是比較常用的，通常被用來控制子元素的左右方向的佈局，這個與上面的flexDirection不同，justifyContent會控制整體子元素左右方向上的一個約束關係。下方是justifyContent的屬性值和使用方式
屬性值：
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"用法示例：
<View style={{ justifyContent: 'flex-start' />
具體的還得看下方這個GIF圖，該圖中就列舉了justifyContent所有的屬性值，並且展示了每個屬性值的不同表現形式，接下來詳細的介紹一下每個屬性值的作用。
-
flex-start: 該屬性值的功能是讓所有 子元素靠 左對齊，如下方點選flex-start的佈局形式。
-
center: 則表示子元素在 左右方向上居中展示，如下方點選Center按鈕對應的佈局形式。
-
flex-end: 這個與flex-start相反，flex-end則表示 子元素靠右對齊，對應著下方點選flex-end按鈕的佈局形式。
-
space-between：從字面意思上不難看出，該屬性值對應的是左右 間距平分於子元素中間的佈局方式，設定該屬性值後，左右邊上是子元素是緊貼父View的左右邊距的，間距平分與子元素中間。
-
space-around: 該屬性也是比較好理解的，就是 左右間距環繞在子元素周圍，從下方點選space-around的效果不難看出，設定該屬性後，每個元素的左右邊距是一致的，環繞在子元素之間。
-
space-evenly: 該屬性值的意思是 子元素的左右間距均分，這個間距包括子元素與子元素的間距，還包括子元素與父元素的間距。
介紹完上述屬性，我們來簡單的看一下該示例的實現程式碼，從上述操作來看本部分的Demo會相對複雜一些。首先來看一下上述按鈕區域對應的程式碼片段：
-
首先我們定義了一個OperaView來容納所有的點選的View，在該View中呼叫了我們自定義的customButton元件。
-
customButton元件接收一個引數，這個引數對應的就是justifyContent的屬性值。每次點選該按鈕，就會把按鈕對應的屬性值寫入Status中。
-
方法ClickView即為CustomButton點選時對應執行的方法。
看完按鈕區域的程式碼，接下來我們就來看一下佈局區域的程式碼：
-
首先來看一下Item，下方的item函式返回的就是佈局區域的每個方框，每個方框的高度相同，寬度由引數決定。
-
然後在看一下resultDisplayView, 該View函式對應的就是按鈕下方的佈局區域，該View的JustifyContent屬性的值是直接從state中獲取的。
-
最後就來看一下render中了，在render中分別呼叫了按鈕區和佈局區兩塊的內容。
完整程式碼如下：
View Code
四、AlignContent
接下來來看一下AlignContent這個屬性及其相關的屬性值。該屬性與上面的JustifyContent屬性的功能差不多，JustifyContent負責左右方向的子元素之間的關係，而AlignContent則負責上下方向上的子元素之間的佈局。下方是AlignContent的相關屬性值和使用方式：
屬性值：
alignContent?:"flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around"用法示例：
<View style={{ alignContent: 'flex-start' />
按照上述的思路，我們還是通過一個Demo來看一下每個屬性值的具體的作用。下方就是本部分對應的Demo，每個按鈕對應著AlignContent的一個屬性值，點選相關按鈕後，下方的子元素就會按照點選的按鈕進行設定。下方是具體介紹：
-
flex-start: 子元素頂部對齊，點選下方的flex-start按鈕會看到所有子元素向上對齊了。
-
center: 上下方向上居中，也就是說設定該屬性，子元素會在上下方向上進行居中展示。
-
flex-end: 該屬性與flex-start相反, 設定該屬性， 子元素會位於父元素的底部展示。
-
space-between：間隔填充， 子元素的上下間距位於子元素中間。
-
space-around: 即間隔環繞在子元素的上下，與JustifyContent的space-around類似。
-
stretch：拉伸，該屬性只有在子元素的高度沒有設定的情況下適用，該情況下會自適應高度，以至填滿父檢視，具體如下所示：
程式碼和之前的Demo的實現思路差不多，在此就不做過多贅述了，下方是該部分的完整示例：
AlignContent
五、flexWrap
接下來看一下flexWrap這個屬性，該屬性負責折行的。例如當一個View沒有設定flexWrap屬性時，子元素又是橫排的情況時，會在一行上一直往後排，並不會折行。如果想折行的話，那麼就得使用這個flexWrap屬性了，下方是flexWrap屬性的相關值和用法：
屬性值：
flexWrap?:"wrap" | "nowrap" | "wrap-reverse"用法示例：
<View style={{ flexWrap: 'wrap' />
flexWrap的屬性值比較少，也比較好理解，下方就進行簡單的描述：
-
wrap: 折行，設定該屬性意味著一行放不下時會自動換到下一行進行展示。
-
nowrap: 不這行，預設值，超出屏幕後也一直往一行後邊疊加。
-
wrap -reverse: 逆向折行，這個雖然在檢視型別的時候有這個選項，但是實測是不可用的，可忽略。
下方就是flexWrap所對應的Demo, 該Demo中的View就設定了flexWrap的屬性為wrap的值，沒點選一次我們就隨機的往後邊新增一個隨機寬度的子View。從下方gif中不難看出，當最後一個View放不下時會自動的換到下一行進行展示。具體如下所示：
該示例的完整程式碼：
FlexWrap
六、AlignItem
該屬性也是比較常用的，用來定義子元素在交叉軸上的對齊方式。也就是說，子元素是橫向排列的，那麼該屬性就約定縱軸方向上的對齊方式。AlignItem屬性的屬性值也沒幾個，也比較好理解，下方是AlignItem對應的熟悉值和使用方式：
屬性值：
type FlexAlignType = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";用法示例：
<View style={{ alignItem: 'flex-start' />
下方就是真的AlignItem實現的一個Demo, 我們將根據下方的Demo來具體的看一下AlignItem所對應的每個屬性值的作用，具體如下所示：
-
flex-start: 首先還是來看一下flex-start， 下方我們的子元素是橫向排列的，所以設定flex-start時，就意味著， 子元素在縱軸開始的位置對齊，也就是頂部對齊。
-
center: 也是以橫向排列的子元素為例，當設定alignItem為Center時，表示 交叉軸方向上居中對齊，具體在該Demo中表現的是上下方向上居中對齊。
-
flex-end: 這個與flex-start相反，表示以交叉軸的尾部對齊。
-
baseline: 這個就比較有意思了，設定該屬性值就意味著子元素以子元素中的 文字的基線對齊。
該示例完整程式碼如下：
AlignItem
七、AlignSelf
最後我們來看一下這個AlignSelf屬性，該屬性是元素屬性，主要設定在子元素上，用來控制單個子元素在父元素的交叉軸的位置。AlignSelf的作用方式與AlignItem差不多，只不過一個作用於父元素，一個是作用於子元素。下方是AlignSelf的屬性值和用法示例：
屬性值：
type FlexAlignType = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";type AlignSelfType = "auto" | FlexAlignType;用法示例：
<View/><View style={{ alignSelf: 'flex-start' /></View>
最後我們仍然通過一個Demo來看一下AlignSelf的表現形式。在下方Demo中我們依次為右邊中間的黑塊設定的AlignSelf屬性。每個屬性的值的意思可參見AlignItem的屬性值，只不過這些屬性值是作用於子元素的。具體關於AlignSelf的內容就不做過多贅述了。
該部分Demo完整示例：
AlignSelf
經過本篇部落格的詳細介紹想必對FlexBox有了更詳細的瞭解，掌握了上述屬性後，在RN中寫佈局應該就不是什麼難事兒了。當然本篇部落格值介紹了FlexBox佈局比較核心的部分，想什麼Margin、Padding等等這些屬性比較簡單，就不做過多贅述了。本篇部落格所涉及的所有Demo會在github上給出，下方會給出相關連結。
下篇部落格會集中根據具體示例來聊一下RN中常用的動畫。
github地址：https://github.com/lizelu/ReactNativeTestDemo
作者：青玉伏案
出處：http://www.cnblogs.com/ludashi/