React Native中的FlexBox
阿新 • • 發佈:2019-02-03
關於JSX
- React的核心機制之一就是虛擬DOM:可以在記憶體中建立的虛擬DOM元素
- React利用虛擬DOM來減少對實際DOM的操作從而提升效能
- 在JavaScript中嵌入XML結構的語法,於是就有了JSX,利用我們熟悉的HTML語法來建立虛擬DOM,在實際開發中,JSX在產品打包階段都已經編譯成純JavaScript,JSX的語法不會帶來任何效能影響
關於FlexBox
- 通過彈性的方式來對齊和分佈容器中內容的空間,使其能適應不同螢幕,為盒裝模型提供最大的靈活性
- Flex佈局主要思想是:讓容器有能力讓其子專案能夠改變其寬度、高度(甚至是順序),以最佳方式填充可用空間
- React native中的FlexBox是這個規範的一個子集
Flexbox的常用屬性
- 元件中存在兩根軸:水平的主軸和垂直軸
- 在元件的style中指定
flexDirection
可以決定佈局的主軸 - 元件內部的所有控制元件的佈局是水平佈局還是垂直佈局只需要控制父檢視的
flexDirection
即可
flexDirection
預設值是主軸是縱向的,即
flexDirection
為column通過修改style中的
flexDirection
為row
justifyContent
決定其子控制元件沿著主軸的排列方式
//center,
//flex-start,
//flex-end,
//space-around 伸縮專案會平均地分佈,倆端保留一半的空間
//space-between 倆端對齊,控制元件之間間隔相等
alignItems
決定其子元素沿著次軸(與主軸垂直的軸,比如若主軸方向為row,則次軸方向為column)的排列方式
//flex-start
//flex-end
//center
//stretch(預設)
flexWrap
預設情況下,專案都排在一條線(又稱”軸線”)上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。
nowrap:(預設值):不換行
wrap:換行,第一行在上方
Flexbox的元素屬性
flex
- 一般而言我們會使用flex:1來指定某個元件擴張以撐滿所有剩餘的空間
- 如果有多個並列的子元件使用了flex:1,則這些子元件會平分父容器中剩餘的空間
- 如果這些並列的子元件的flex值不一樣,則誰的值更大,誰佔據剩餘空間的比例就更大(即佔據剩餘空間的比等於並列元件間flex值的比)
- 注:元件能夠撐滿剩餘空間的前提是其父容器的尺寸不為零。如果父容器既沒有固定的width和height,也沒有設定flex,則父容器的尺寸為零。其子元件如果使用了flex,也是無法顯示的
alignSelf
align-self屬性允許單個子控制元件有與其他控制元件不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch
// flex-start
// flex-end
// center
// auto(預設)
目前所有控制元件設定的是居中,若第一個view想要改變位置,只需要在style中設定alignSelf為flex-start,就會改變其位置
其他佈局
尺寸
- width
- height
邊距
- left number 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
- right number 屬性規定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移
- top number 屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
- bottom number 屬性規定元素的底部邊緣。該屬性定義了一個定位元素的下外邊距邊界與其包含塊下邊界之間的偏移。
檢視邊框
- borderBottomWidth 底部邊框寬度
- borderLeftWidth 左邊框寬度
- borderRightWidth 右邊框寬度
- borderTopWidth 頂部邊框寬度
- borderWidth 邊框寬度
- borderColor 個方向邊框的顏色
- borderColor 邊框顏色
export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.innerViewStyle}>
</View>
</View>
);
}
};
const styles = StyleSheet.create({
container:{
width:200,
height:200,
backgroundColor:'red',
},
innerViewStyle:{
width:100,
height:100,
backgroundColor:'yellow',
borderBottomWidth:30,
borderLeftWidth:30,
borderRightWidth:30,
borderTopWidth:30,
borderWidth:10,
borderColor:'blue',
},
});
執行效果:
外邊距
圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的空間
- margin 外邊距
- marginBottom 下外邊距
- marginHorizontal 左右外邊距
- marginLeft 左外邊距
- marginRight 右外邊距
- marginTop 上外邊距
- marginVertical 上下外邊距
export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.innerViewStyle}>
</View>
</View>
);
}
};
const styles = StyleSheet.create({
container:{
width:200,
height:200,
backgroundColor:'red',
},
innerViewStyle:{
width:100,
height:100,
backgroundColor:'yellow',
margin:30,
},
});
執行效果:
內邊距
元素的內邊距在邊框和內容區之間
- padding 內邊距
- paddingBottom 下內邊距
- paddingHorizontal 左右內邊距
- paddingLeft 做內邊距
- paddingRight 右內邊距
- paddingTop 上內邊距
- paddingVertical 上下內邊距
export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.innerViewStyle}>
</View>
</View>
);
}
};
const styles = StyleSheet.create({
container:{
width:200,
height:200,
backgroundColor:'red',
//內邊距
padding:30,
},
innerViewStyle:{
width:100,
height:100,
backgroundColor:'yellow',
},
});
執行效果:
定位(position)
設定元素的定位方式,為將要定位的元素定義定位規則。通過position
,enum(‘absolute’, ‘relative’)屬性設定
- absolute:生成絕對定位的元素,元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
- relative:生成相對定位的元素,相對於其正常位置進行定位。因此,”left:20” 會向元素的 LEFT 位置新增 20 畫素。
注意:結論:通常情況下設定position和absolute,定位的效果是一樣的,但是如果父元件設定了內邊距,position會做出相應的定位改變,而absolute則不會。