React Native基礎&入門教程：初步使用Flexbox佈局

在上篇中，筆者分享了部分安裝並調試React Native應用過程裏的一點經驗，若是尚未看過的同窗請點擊《React Native基礎&入門教程：調試React Native應用的一小步》。

在本篇裏，讓咱們一塊兒來了解一下，什麼是Flexbox佈局，以及如何使用。

 

1、長度的單位

在開始任何佈局以前，讓咱們來首先須要知道，在寫React Native組件樣式時，長度的不帶單位的，它表示「與設備像素密度無關的邏輯像素點」。

這個怎麼理解呢？

咱們知道，屏幕上一個發光的最小點，對應着一個pixel（像素）點。

假設下面三個矩形，表明三個屏幕大小同樣的設備，可是，它們擁有的分辨率（resolution）不一樣：

圖1.相同尺寸的設備 不一樣的分辨率

圖上的每個小格子，其實就表明了一個像素（pixel）。能夠看到，一個像素點的大小，在這個三個物理尺寸同樣但擁有不一樣分辨率的設備上，是不同的。

若是咱們以像素爲單位來設置一個界面元素的大小，好比說2px的高度，那麼這2px的長度上面的設備中就會是下面這個樣子：

圖2.不一樣分辨率下的2px實際高度

它們真實顯示出的長度是不同的。

咱們想要一種長度單位，在一樣物理尺寸大小的屏幕上（不論分辨率誰高誰低，只要物理尺寸大小同樣便可），1個單位的長度所表明的物理尺寸是同樣的。這種單位就應該是獨立於分辨率的，把它起一個名字叫作 density-independent pixels，簡稱dp。這其實就是Android系統中所使用的長度單位。

舉例來講，2dp寬，2dp高的內容，在不一樣分辨率但屏幕尺寸同樣的設備上所顯示出的物理大小是同樣的。（一個題外話：有些Android開發者建議全部可點擊的按鈕，寬高都不該該少於48dp。）

圖3. 2dp * 2dp大小的內容 在一樣尺寸的屏幕中所佔據的物理大小一致

Android中字體大小使用另一個單位，叫作scale independent pixels，簡稱sp。這個單位和dp很相似，不過它一般是用在對字體大小的設置中。經過它設置的字體，能夠根據系統字體大小的變化而變化。

pixel與dp存在一個公式：px = dp * (dpi/160)。

dpi表示dot per inch，是每英寸上的像素點，它也有個本身的計算公式，具體這裏就不展開了。只須要知道咱們之因此要使用一個獨立於設備分辨率的單位，主要是爲了讓應用在不一樣分辨率的設備中，看起來一致。

在RN中，一樣也擁有一個相似於dp的長度單位。若是咱們想知道本身的屏幕以這種長度的計量下是多少單位，能夠經過引入react-native包中的Dimensions拿到，同時還能夠查看本機的像素比例是多少。

import { 　　Text, 　　View, 　　Dimensions, 　　PixelRatio } from 'react-native'; const { height, width } = Dimensions.get('window'); const pxRatio = PixelRatio.get();
 <View style={styles.container}>
　　<Text style={styles.welcome}> 　　　　{`width: ${width}, height: ${height}`} 　　</Text>
　　<Text style={styles.welcome}> 　　　　{`pixel radio: ${pxRatio}`} 　　</Text>
</View>

顯示以下：

圖4. 當前手機的屏幕信息

它反映出，當前手機屏幕的寬度佔據360個單位，高度佔據640個單位。像素比例是3，實際上這就是一個 1080 * 1920 像素的手機。其中1080 = width * pixelRadio, 1920 = height * pixelRatio

2、Flexbox佈局

Flexbox佈局，也就是彈性盒模型佈局。也許有Android開發經驗的朋友還對LinearLayout，RelativeLayout，FrameLayout等佈局方法記憶猶新，可是對於更瞭解CSS的Web開發者而言，使用flexbox佈局確定會讓他感覺到更加順手的開發體驗。

RN中的flexbox佈局，其實源於CSS中的flexbox（彈性盒子）佈局規範。其實它在CSS中還處於Last Call Working Draft（最終徵求意見稿）階段，可是主流瀏覽器對它都有了良好的支持。在RN中，幾乎徹底借鑑了其中的佈局語義，同時更沒有瀏覽器兼容的煩惱，用起來是很方便的。RN中只是把CSS的屬性用camelCase寫法代替連字符寫法。後面還還會看到，默認的flex方向也不一樣。

理解彈性盒模型佈局，首先要知道四個最基本的概念：Flex Container（容器），Flex Item（項），Flex Direction（方向）和Axis（軸）。

1.Flex Container

就是包裹內容的容器，須要把它的display設置爲‘flex’（或者'inline-flex'）。

如下6個屬性設置在容器上。

1. alignItems 指定item在側軸上的對齊方式
2. alignContent 指定item在多條軸上的對齊方式
3. flexDirection 指定主軸方向
4. flexWrap 指定item在主軸方向如何換行
5. flexFlow flexDirection屬性和flexWrap屬性的簡寫形式
6. justifyContent 指定item在主軸上的分佈方式

2.Flex Item

容器作直接包裹的元素。所謂彈性盒佈局，一般想要佈局的東西就是它們。

如下6個屬性設置在項目上。

1. alignSelf 每一個item能夠單獨設置對齊方式 覆蓋Flex Container給設置的alignItems
2. order 指定item排列順序 數字越小越靠前
3. flexGrow 指定item的拉伸比例
4. flexShrink 指定item的壓縮比例
5. flexBasis 指定item在分配多餘空間以前，佔主軸的大小
6. flex 實際上是 flexGrow flexShrink flexBasis的簡寫

3.Flex Direction and Axis

在彈性盒子中，項目默認沿着main axis（主軸）排列，和主軸垂直的軸叫作cross axis，叫作側軸，或者交叉軸。

在盒子中，排列項目又四個方向：水平的正反兩個，垂直的正反兩個。

結構代碼：

<View>
    <View style={styles.row}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.rowReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.column}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.columnReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

 

樣式代碼：

row: { backgroundColor: '#ffe289', flexDirection: 'row' }, rowReverse: { flexDirection: 'row-reverse' }, column: { backgroundColor: '#ffe289', flexDirection: 'column' }, columnReverse: { flexDirection: 'column-reverse' },

圖5. flexDirection

因爲網上關於flex佈局講解的資源挺豐富的，讀者能夠參考最後給出的鏈接，或者自行上網搜索，CSS中的和RN是相通的。

這裏主要分享我的在學習過程當中，以爲容易引發混淆的兩個小點。

首先，justify-content和align-content這兩個屬性，可能比較容易搞錯它們做用的方向。

其中，justify-content是設置items沿着主軸上是如何分佈的。align-content是設置items沿着側軸如何對齊的。

仍是拿以前的例子，默認狀況下，flex的方向是column（這個與移動端與web頁面不一樣，在web頁面用CSS設置flex佈局，默認的fiex-direction是row，即水平從左往右）。

在移動端，主軸默認是垂直方向，從上往下。讓咱們把它的高度設置高一點，放3個item在裏面：

結構代碼：

<View>
    <View style={styles.defaultFlex}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

樣式代碼：

defaultFlex: { height: 300, backgroundColor: '#ffe289', display: 'flex' }

圖6. 默認的flex

justify-content設置items在主軸方向的如何分佈，好比，若是咱們加上justifyContent: 'space-between'

defaultFlex: { height: 300, backgroundColor: '#ffe289', display: 'flex', justifyContent: 'space-between' }

items就沿主軸分開了。

圖7. justifyContent: 'space-between'

若是咱們設置alignItems: 'center',項目就沿側軸（這裏就是水平軸）居中了。注意這兩個屬性是能夠同時起做用的。

圖8. justifyContent: 'space-between' 以及 alignItems: 'center'

而後，值得指出的是，flex這個屬性，實際上是flexGrow, flexShrink, flexBasis（對應的CSS屬性flex-grow, flex-shrink和flex-basis)三個屬性的結合。

咱們一般在移動端看到的flex:1這個設置，實際上是對flex-grow的設置。後者的默認值爲0。使用把flex-grow設置爲正整數的方法，可讓item按比例分佈，或者在其餘item爲固定大小時撐滿剩餘的盒子空間，就彷彿具備彈性同樣。

結構代碼：

<View style={styles.container}>
    <View style={styles.flex1}></View>
    <View style={styles.flex2}></View>
    <View style={styles.flex3}></View>
</View>

樣式代碼：

container: { flex: 1 }, flex1: { // height: 99, flexGrow: 1, backgroundColor: 'orange', }, flex2: { flexGrow: 2, backgroundColor: 'lightblue', }, flex3: { flexGrow: 3, backgroundColor: 'green', },

圖9. 按比例分佈

須要注意的是，若是父容器的尺寸爲零（即沒有設置寬高，或者沒有設定flex），即便子組件若是使用了flex，也是沒法顯示的。

因此這裏最外層的使用了flex佈局的，flex:1，表示讓它佔據了垂直的整個空間。

3、小小實戰演練

讓咱們來簡單使用flex佈局，對以前的例子稍加調整，實現一個頭部，底部固定高度，中間內容佔滿剩下的屏幕的佈局：

第一步，調整結構：

<View style={styles.container}>
    <View style={styles.header}></View>
    <View style={styles.body}></View>
    <View style={styles.footer}></View>
</View>

調整樣式：

container: { flex: 1 }, header: { height: 60, backgroundColor: 'orange', }, body: { flexGrow: 1, backgroundColor: 'lightblue', }, footer: { height: 60, backgroundColor: 'green', }

圖10. 有頭尾的佈局

第二部，給header添加標題。

咱們讓頭部的分紅3部分，左邊模擬一個返回按鈕，中間顯示標題文字，右邊模擬一把小叉：

<View style={styles.header}>
    <Text style={styles.back}>返回</Text>
    <Text style={styles.title}>這是一個標題</Text>
    <Text style={styles.exit}>×</Text>
</View>

須要把header的flexDirection設置爲水平方向：

header: { height: 60, backgroundColor: 'orange', flexDirection: 'row', alignItems: 'center' }, back: { color: 'white', marginLeft: 15 }, title: { flexGrow: 1, fontSize: 20, color: 'white', textAlign: 'center' }, exit: { marginRight: 20, fontSize: 20, color: 'white' }

圖11. header有了標題

第三步，咱們能夠把footer三等分，模擬成菜單的樣子：

<View style={styles.footer}>
    <Text style={styles.firstMenu}>添加</Text>
    <Text style={styles.menu}>刪除</Text>
    <Text style={styles.menu}>修改</Text>
</View>

添加樣式：

footer: { height: 60, backgroundColor: 'green', flexDirection: 'row', alignItems: 'center' }, menu: { flexGrow: 1, textAlign: 'center', borderColor: 'white', borderLeftWidth: 1, color: 'white' }, firstMenu: { flexGrow: 1, textAlign: 'center', color: 'white' },

圖12. footer三等分 模擬菜單

最後，讓咱們在body裏也填入幾個帶按鈕的輸入框。

引入TextInput和Button組件，而後把它們分三組放入body中，

<View style={styles.body}>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="肯定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="很是肯定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="肯定必定以及確定"></Button>
    </View>
</View>

添加樣式：

body: { flexGrow: 1, backgroundColor: 'lightblue', }, inputRow: { flexDirection: 'row', alignItems: 'center', marginLeft: 10, marginRight: 10 }, textInput: { flex: 1 }, btn: { minWidth: 60 }

flex佈局的一個經常使用實踐是，部份內容固定寬高，讓剩下的內容自適應。

像上面這樣，咱們給Button有一個最小寬度，且TextInput的flexGrow爲1，這樣的作法能夠實現，TextInput老是佔滿剩下的寬度，且可伸縮。

看了上面的例子，是否以爲在React Native中使用Flexbox佈局也挺簡單呢？

但願這是個不錯的開始。

 

移動端應用開發利器：

SpreadJS純前端表格控件、WijmoJS純前端控件集爲您的移動應用帶來更加靈活的操做體驗和更佳美觀的外觀風格，歡迎下載。

擴展閱讀：

純乾貨分享：如何在 React 框架中使用SpreadJS