前言
React-Native? 已經學了很久了 但是有些基礎的東西總是忘記所以給自己總結下一些總忘記的東西
內容
1.
flexDirection? 改變主軸的方式? 默認是縱軸
row: 從左向右依次排列
row-reverse: 從右向左依次排列
column(default): 默認的排列方式，從上向下排列
column-reverse: 從下向上排列
例 flexDirection:'row',
2.
上邊距? marginTop:25,
3.
justifyContent? 在主軸的對齊方式
flex-start(default)像一行的行首對齊
flex-end 像一行的尾部對齊
center向一行的中點位置對齊?
space-between 兩端對齊 每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同
space-around? 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。
justifyContent:'space-around',
4.
alignItems? 側軸(垂直于主軸)的對齊方式
flex-start(設置了高的默認值) 長度不同貼于上部
flex-end 長度不同貼于下部? ?
center 長度不同貼于中間
strech (如果沒有設置高 默認值 他們高度會根據俯視圖填充)長度不同但是全根據最長的等高例
alignItems:'center',
5.flexWrap 軸線
flex和flexWrap不能同時存在nowrap(默認值)不換行? wrap 換行 第一行在上方? wrap-reversa 第一行在下方 和wrap相反flexWrap:'wrap'
6
flex? 以百分比分? 父視圖的長度 比上flex的總長flex :1
7
Image加載本地圖片require? 加載網絡圖片 uri
//<Image source={require('./Simulato.png')}? style={ styles.welcome }/>
//<Image source={uri:'https://www.baidu.com/img/bd_logo1.png'}? style={ styles.welcome }/>
welcome:{
? ? width:100,?
? height:100,? ? ?
// 設置圖片的圓角
borderRadius:30,? ??
//設置圖片的內容形式 resizeMode? ? ?
//Image.resizeMode.cover? 默認 圖片居中顯示? 沒有被拉伸 超出部分剪裁掉? ? ?
resizeMode :Image.resizeMode.cover,? ??
//Image.resizeMode.contain 容器完全容納圖片 圖片等比例拉伸? ? ?
resizeMode :Image.resizeMode.contain? ?
? //stretch 圖片被拉伸適應容器大小 有可能發(fā)生變形? ?
? ? ? // 必須給寬度和高度
? resizeMode :Image.resizeMode.stretch,
},
用圖片設置背景 本地圖片require? 加載網絡圖片 uri
//<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'} }? style={{? position:'absolute' marginTop:40,backgroundColor:'transparent'}}>
背景透明backgroundColor:'transparent'
position
絕對定位
</Image>
