react native 學習筆記之指定樣式，寬，高

樣式style沒啥好說的，可以用{}擴起來指定樣式，也可以用StyleSheet.create來集中定義組件的樣式。

給控件指定寬高其實也沒啥好說的，可以指定絕對值，比如：

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

也可以指定 彈性（Flex）寬高。

在組件樣式中使用flex可以使其在可利用的空間中動態地擴張或收縮。一般而言我們會使用flex:1來指定某個組件擴張以撐滿所有剩餘的空間。如果有多個並列的子組件使用了flex:1，則這些子組件會平分父容器中剩餘的空間。如果這些並列的子組件的flex值不一樣，則誰的值更大，誰佔據剩餘空間的比例就更大（即佔據剩餘空間的比等於並列組件間flex值的比）。

參考下面的例子：

<View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} /> //整體權重是三個子控件flex數字之和，則表示佔六分之一
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />    //佔六分之2
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />  //佔六分之3.佔了屏幕的一半高度
</View>

效果圖：

關於flex的更多例子：可以參看我的下一篇文章：react native 學習筆記----使用Flexbox佈局