今天在講解Flexbox之前，我們先講解一下高度和寬度的問(wèn)題。因?yàn)镠eight and Width的問(wèn)題很簡(jiǎn)單儡毕，就不單獨(dú)寫(xiě)一篇文章了交排。順帶說(shuō)一下即可划滋。
Height and Width
一個(gè)組件的高度和寬度，決定了它在屏幕上顯示的大小埃篓。
固定尺寸
最簡(jiǎn)單的設(shè)置組件的尺寸的方法就是通過(guò)添加一個(gè)固定的寬度和高度处坪。所有尺寸大小在React Native沒(méi)有單位的,代表著獨(dú)立的像素密度。
官網(wǎng)例子
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
效果圖：
這樣設(shè)置尺寸大小的方式，比較適合于要求不同的屏幕上顯示相同大小的View或者組件同窘。寫(xiě)固定的尺寸大小玄帕，死值。
彈性寬高
我們可以在組件樣式中使用flex讓組件根據(jù)可用空間動(dòng)態(tài)的收縮和擴(kuò)展想邦。通常情況下我們可以使用flex: 1裤纹，告訴某個(gè)組件來(lái)填充剩余的所有的空間，如果是多個(gè)組件的話丧没，則是所有的這些組件去平分父容器中的剩余的所有空間鹰椒。。如果這些并列的子組件的flex值不一樣骂铁，則誰(shuí)的值更大吹零，誰(shuí)占據(jù)剩余空間的比例就更大（跟我們android中weight的用法差不多）。
官網(wǎng)例子
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FlexDimensionsBasics extends Component {
render() {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
// What if you add `height: 300` instead of `flex: 1`?
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
效果圖：
關(guān)于高度和寬度就講這些吧拉庵，其實(shí)內(nèi)容都是翻譯與官網(wǎng)的docs灿椅，地址：
https://facebook.github.io/react-native/docs/height-and-width.html#height-and-width
Flexbox
一個(gè)組件可以使用Flexbox指定其子組件或元素之間的布局。Flexbox旨在為不同的屏幕上提供一致的布局钞支。
通常情況下茫蛹，我們結(jié)合使用flexDirection、alignItems和 justifyContent三個(gè)樣式屬性就已經(jīng)能夠?qū)崿F(xiàn)我們所需的布局烁挟。
注意：Flexbox在React Native的工作原理和使用方式與css在web上的方式基本一樣婴洼，當(dāng)然也有一些例外：比如flexDirection的默認(rèn)值是column而不是row，alignItems的默認(rèn)值是stretch而不是flex-start撼嗓，以及flex只能指定一個(gè)數(shù)字值柬采。
Flex Direction
向一個(gè)組件的樣式中添加Flex Direction可以決定一個(gè)布局的主軸。子元素應(yīng)該沿著水平方向(row)排列且警，還是沿著豎直方向(column)排列呢粉捻？默認(rèn)值是豎直(column)方向。
官網(wǎng)例子
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FlexDirectionBasics extends Component {
render() {
return (
// Try setting `flexDirection` to `column`.
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
效果圖：
Justify Content
向組件的樣式中添加Justify Content可以決定其子元素沿著主軸的排列方式斑芜。子元素應(yīng)該分布在主軸的開(kāi)始端肩刃，還是中間，最后杏头，還是均勻分布盈包？可用的選項(xiàng)有：flex-start、center醇王、flex-end呢燥、space-around以及space-between。
- flex-start：彈性盒子元素將與行起始位置對(duì)齊寓娩。該行的第一個(gè)子元素的主起始位置的邊界將與該行的主起始位置的邊界對(duì)齊疮茄，同時(shí)所有后續(xù)的伸縮盒項(xiàng)目與其前一個(gè)項(xiàng)目對(duì)齊滥朱。
- flex-end：彈性盒子元素將與行結(jié)束位置對(duì)齊。該行的第一個(gè)子元素的主結(jié)束位置的邊界將與該行的主結(jié)束位置的邊界對(duì)齊力试，同時(shí)所有后續(xù)的伸縮盒項(xiàng)目與其前一個(gè)項(xiàng)目對(duì)齊。
- center：彈性盒子元素將與行中間位置對(duì)齊排嫌。該行的子元素將相互對(duì)齊并在行中居中對(duì)齊畸裳，同時(shí)第一個(gè)元素與行的主起始位置的邊距等同與最后一個(gè)元素與行的主結(jié)束位置的邊距（如果剩余空間是負(fù)數(shù)，則保持兩端相等長(zhǎng)度的溢出）淳地。
- space-between：彈性盒子元素會(huì)均勻分布在行里怖糊。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個(gè)子元素颇象，則該值等效于'flex-start'伍伤。在其它情況下，第一個(gè)元素的邊界與行的主起始位置的邊界對(duì)齊遣钳，同時(shí)最后一個(gè)元素的邊界與行的主結(jié)束位置的邊距對(duì)齊扰魂，而剩余的伸縮盒項(xiàng)目則平均分布，并確保兩兩之間的空白空間相等蕴茴。
- space-around：彈性盒子元素會(huì)均勻分布在行里劝评，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負(fù)數(shù)倦淀，或該行只有一個(gè)伸縮盒項(xiàng)目蒋畜，則該值等效于'center'。在其它情況下撞叽，伸縮盒項(xiàng)目則平均分布姻成，并確保兩兩之間的空白空間相等，同時(shí)第一個(gè)元素前的空間以及最后一個(gè)元素后的空間為其他空白空間的一半愿棋。
官網(wǎng)例子
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
效果圖：
Align Items
向組件的樣式（style）中添加alignItems可以決定其子元素沿著次軸（就是與主軸垂直的軸科展，比如若主軸方向?yàn)閞ow，則次軸方向?yàn)閏olumn）的排列方式初斑。子元素是應(yīng)該靠近次軸的開(kāi)始端還是中間辛润，還是末端，亦或是拉伸來(lái)填補(bǔ)呢见秤？可用選項(xiàng)有：flex-start砂竖、center、flex-end以及stretch鹃答。
- flex-start：彈性盒子元素的次軸起始位置的邊界緊靠該行的次軸起始邊界乎澄。
- flex-end：彈性盒子元素的次軸起始位置的邊界緊靠住該行的次軸結(jié)束邊界。
- center：彈性盒子元素在該行的次軸）上居中放置测摔。（如果該行的尺寸小于彈性盒子元素的尺寸置济，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）解恰。
- stretch：如果指定次軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸浙于，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制护盈。
注意：要使stretch選項(xiàng)生效的話，子元素在次軸方向上不能有固定的尺寸羞酗。在下面的例子中：只有將子元素樣式中的width: 50去掉之后腐宋，alignItems: 'stretch'才能生效。
官網(wǎng)例子
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AlignItemsBasics extends Component {
render() {
return (
// Try setting `alignItems` to 'flex-start'
// Try setting `justifyContent` to `flex-end`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
效果圖：
文章翻譯并參考于Flexbox官方文檔檀轨，地址：
https://facebook.github.io/react-native/docs/flexbox.html
好了胸竞，到這里關(guān)于Flexbox的講解就講到這里了，關(guān)于Flexbox運(yùn)用参萄，上面的例子只是冰山一角卫枝，要想真正熟練掌握，還得靠自己親自動(dòng)手去寫(xiě)讹挎，去實(shí)踐校赤，才能夠真正來(lái)理解各個(gè)屬性的意思。趕緊動(dòng)手去實(shí)踐吧淤袜。
