關於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則不會。