React Native基礎(chǔ)入門(mén)之初步使用Flexbox布局

更新時(shí)間：2018年07月02日 15:32:57 作者：葡萄城控件技術(shù)團(tuán)隊(duì)

React中引入了flexbox概念，flexbox是屬于web前端領(lǐng)域CSS的一種布局方案，下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門(mén)之初步使用Flexbox布局的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下

前言

在上篇中，筆者分享了部分安裝并調(diào)試React Native應(yīng)用過(guò)程里的一點(diǎn)經(jīng)驗(yàn)，如果還沒(méi)有看過(guò)的同學(xué)請(qǐng)點(diǎn)擊《React Native基礎(chǔ)&入門(mén)教程：調(diào)試React Native應(yīng)用的一小步》。

在本篇里，讓我們一起來(lái)了解一下，什么是Flexbox布局，以及如何使用。

一、長(zhǎng)度的單位

在開(kāi)始任何布局之前，讓我們來(lái)首先需要知道，在寫(xiě)React Native組件樣式時(shí)，長(zhǎng)度的不帶單位的，它表示“與設(shè)備像素密度無(wú)關(guān)的邏輯像素點(diǎn)”。

這個(gè)怎么理解呢？

我們知道，屏幕上一個(gè)發(fā)光的最小點(diǎn)，對(duì)應(yīng)著一個(gè)pixel（像素）點(diǎn)。

假設(shè)下面三個(gè)矩形，代表三個(gè)屏幕大小一樣的設(shè)備，但是，它們擁有的分辨率（resolution）不同：

圖1.相同尺寸的設(shè)備不同的分辨率

圖上的每一個(gè)小格子，其實(shí)就代表了一個(gè)像素（pixel）?？梢钥吹剑粋€(gè)像素點(diǎn)的大小，在這個(gè)三個(gè)物理尺寸一樣但擁有不同分辨率的設(shè)備上，是不一樣的。

如果我們以像素為單位來(lái)設(shè)置一個(gè)界面元素的大小，比如說(shuō)2px的高度，那么這2px的長(zhǎng)度上面的設(shè)備中就會(huì)是下面這個(gè)樣子：

圖2.不同分辨率下的2px實(shí)際高度

它們真實(shí)顯示出的長(zhǎng)度是不一樣的。

我們想要一種長(zhǎng)度單位，在同樣物理尺寸大小的屏幕上（不論分辨率誰(shuí)高誰(shuí)低，只要物理尺寸大小一樣即可），1個(gè)單位的長(zhǎng)度所代表的物理尺寸是一樣的。這種單位就應(yīng)該是獨(dú)立于分辨率的，把它起一個(gè)名字叫做 density-independent pixels，簡(jiǎn)稱(chēng)dp。這其實(shí)就是Android系統(tǒng)中所使用的長(zhǎng)度單位。

舉例來(lái)說(shuō)，2dp寬，2dp高的內(nèi)容，在不同分辨率但屏幕尺寸一樣的設(shè)備上所顯示出的物理大小是一樣的。（一個(gè)題外話(huà)：有些Android開(kāi)發(fā)者建議所有可點(diǎn)擊的按鈕，寬高都不應(yīng)該少于48dp。）

圖3. 2dp * 2dp大小的內(nèi)容在同樣尺寸的屏幕中所占據(jù)的物理大小一致

Android中字體大小使用另外一個(gè)單位，叫做scale independent pixels，簡(jiǎn)稱(chēng)sp。這個(gè)單位和dp很類(lèi)似，不過(guò)它通常是用在對(duì)字體大小的設(shè)置中。通過(guò)它設(shè)置的字體，可以根據(jù)系統(tǒng)字體大小的變化而變化。

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

dpi表示dot per inch，是每英寸上的像素點(diǎn)，它也有個(gè)自己的計(jì)算公式，具體這里就不展開(kāi)了。只需要知道我們之所以要使用一個(gè)獨(dú)立于設(shè)備分辨率的單位，主要是為了讓?xiě)?yīng)用在不同分辨率的設(shè)備中，看起來(lái)一致。

在RN中，同樣也擁有一個(gè)類(lèi)似于dp的長(zhǎng)度單位。如果我們想知道自己的屏幕以這種長(zhǎng)度的計(jì)量下是多少單位，可以通過(guò)引入react-native包中的Dimensions拿到，同時(shí)還可以查看本機(jī)的像素比例是多少。

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. 當(dāng)前手機(jī)的屏幕信息

它反映出，當(dāng)前手機(jī)屏幕的寬度占據(jù)360個(gè)單位，高度占據(jù)640個(gè)單位。像素比例是3，實(shí)際上這就是一個(gè) 1080 * 1920 像素的手機(jī)。其中1080 = width * pixelRadio, 1920 = height * pixelRatio

二、Flexbox布局

Flexbox布局，也就是彈性盒模型布局。也許有Android開(kāi)發(fā)經(jīng)驗(yàn)的朋友還對(duì)LinearLayout，RelativeLayout，F(xiàn)rameLayout等布局方法記憶猶新，但是對(duì)于更了解CSS的Web開(kāi)發(fā)者而言，使用flexbox布局肯定會(huì)讓他感受到更加順手的開(kāi)發(fā)體驗(yàn)。

RN中的flexbox布局，其實(shí)源于CSS中的flexbox（彈性盒子）布局規(guī)范。其實(shí)它在CSS中還處于Last Call Working Draft（最終征求意見(jiàn)稿）階段，但是主流瀏覽器對(duì)它都有了良好的支持。在RN中，幾乎完全借鑒了其中的布局語(yǔ)義，同時(shí)更沒(méi)有瀏覽器兼容的煩惱，用起來(lái)是很方便的。RN中只是把CSS的屬性用camelCase寫(xiě)法代替連字符寫(xiě)法。后面還還會(huì)看到，默認(rèn)的flex方向也不同。

理解彈性盒模型布局，首先要知道四個(gè)最基本的概念：Flex Container（容器），F(xiàn)lex Item（項(xiàng)），F(xiàn)lex Direction（方向）和Axis（軸）。

1.Flex Container

就是包裹內(nèi)容的容器，需要把它的display設(shè)置為‘flex'（或者'inline-flex'）。

以下6個(gè)屬性設(shè)置在容器上。

alignItems 指定item在側(cè)軸上的對(duì)齊方式
alignContent 指定item在多條軸上的對(duì)齊方式
flexDirection 指定主軸方向
flexWrap 指定item在主軸方向如何換行
flexFlow flexDirection屬性和flexWrap屬性的簡(jiǎn)寫(xiě)形式
justifyContent 指定item在主軸上的分布方式

2.Flex Item

容器做直接包裹的元素。所謂彈性盒布局，通常想要布局的東西就是它們。

以下6個(gè)屬性設(shè)置在項(xiàng)目上。

alignSelf 每個(gè)item可以單獨(dú)設(shè)置對(duì)齊方式覆蓋Flex Container給設(shè)置的alignItems
order 指定item排列順序數(shù)字越小越靠前
flexGrow 指定item的拉伸比例
flexShrink 指定item的壓縮比例
flexBasis 指定item在分配多余空間之前，占主軸的大小
flex 其實(shí)是 flexGrow flexShrink flexBasis的簡(jiǎn)寫(xiě)

3.Flex Direction and Axis

在彈性盒子中，項(xiàng)目默認(rèn)沿著main axis（主軸）排列，和主軸垂直的軸叫做cross axis，叫做側(cè)軸，或者交叉軸。

在盒子中，排列項(xiàng)目又四個(gè)方向：水平的正反兩個(gè)，垂直的正反兩個(gè)。

結(jié)構(gòu)代碼：

<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

由于網(wǎng)上關(guān)于flex布局講解的資源挺豐富的，讀者可以參考最后給出的連接，或者自行上網(wǎng)搜索，CSS中的和RN是相通的。

這里主要分享個(gè)人在學(xué)習(xí)過(guò)程中，覺(jué)得容易引起混淆的兩個(gè)小點(diǎn)。

首先，justify-content和align-content這兩個(gè)屬性，可能比較容易搞錯(cuò)它們作用的方向。

其中，justify-content是設(shè)置items沿著主軸上是如何分布的。align-content是設(shè)置items沿著側(cè)軸如何對(duì)齊的。

還是拿之前的例子，默認(rèn)情況下，flex的方向是column（這個(gè)與移動(dòng)端與web頁(yè)面不同，在web頁(yè)面用CSS設(shè)置flex布局，默認(rèn)的fiex-direction是row，即水平從左往右）。

在移動(dòng)端，主軸默認(rèn)是垂直方向，從上往下。讓我們把它的高度設(shè)置高一點(diǎn)，放3個(gè)item在里面：

結(jié)構(gòu)代碼：

<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. 默認(rèn)的flex

justify-content設(shè)置items在主軸方向的如何分布，比如，如果我們加上justifyContent: 'space-between'

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

items就沿主軸分開(kāi)了。

圖7. justifyContent: 'space-between'

如果我們?cè)O(shè)置alignItems: 'center',項(xiàng)目就沿側(cè)軸（這里就是水平軸）居中了。注意這兩個(gè)屬性是可以同時(shí)起作用的。

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

然后，值得指出的是，flex這個(gè)屬性，其實(shí)是flexGrow, flexShrink, flexBasis（對(duì)應(yīng)的CSS屬性flex-grow, flex-shrink和flex-basis)三個(gè)屬性的結(jié)合。

我們通常在移動(dòng)端看到的flex:1這個(gè)設(shè)置，其實(shí)是對(duì)flex-grow的設(shè)置。后者的默認(rèn)值為0。使用把flex-grow設(shè)置為正整數(shù)的方法，可以讓item按比例分布，或者在其他item為固定大小時(shí)撐滿(mǎn)剩余的盒子空間，就仿佛具有彈性一樣。

結(jié)構(gòu)代碼：

<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. 按比例分布

需要注意的是，如果父容器的尺寸為零（即沒(méi)有設(shè)置寬高，或者沒(méi)有設(shè)定flex），即使子組件如果使用了flex，也是無(wú)法顯示的。

所以這里最外層的使用了flex布局的，flex:1，表示讓它占據(jù)了垂直的整個(gè)空間。

三、小小實(shí)戰(zhàn)演練

讓我們來(lái)簡(jiǎn)單使用flex布局，對(duì)之前的例子稍加調(diào)整，實(shí)現(xiàn)一個(gè)頭部，底部固定高度，中間內(nèi)容占滿(mǎn)剩下的屏幕的布局：

第一步，調(diào)整結(jié)構(gòu)：

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

調(diào)整樣式：

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

圖10. 有頭尾的布局

第二部，給header添加標(biāo)題。

我們讓頭部的分成3部分，左邊模擬一個(gè)返回按鈕，中間顯示標(biāo)題文字，右邊模擬一把小叉：

<View style={styles.header}>
 <Text style={styles.back}>返回</Text>
 <Text style={styles.title}>這是一個(gè)標(biāo)題</Text>
 <Text style={styles.exit}>×</Text>
</View>

需要把header的flexDirection設(shè)置為水平方向：

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有了標(biāo)題

第三步，我們可以把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三等分模擬菜單

最后，讓我們?cè)赽ody里也填入幾個(gè)帶按鈕的輸入框。

引入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
}