flex布局
position鍵
當(dāng)position鍵為的值為absolute時(shí)初橘，描述位置可以使用top奥额、bottom愉昆、left薄疚、right四個(gè)鍵碧信，表示當(dāng)前組件的位置距父組件的最上沿有多少個(gè)pt.
當(dāng)position鍵為的值為relative時(shí)赊琳，不可以使用bottom和right鍵繼續(xù)描述位置。Top和left鍵的默認(rèn)值為0砰碴。Top和Left鍵表示當(dāng)前組件距離上一個(gè)同級(jí)組件的最上沿有多少pt躏筏。
flexDirection鍵
flexDirection鍵決定了組件內(nèi)部的子組件是如何排列的
justifyContent鍵
是用來定義在一個(gè)方向上如何排列子組件
alignItems鍵：
-
定義了View組件中所有子組件的對(duì)齊規(guī)則. 有4種可能的字符串類型的值:
flex-start 頂部對(duì)齊
flex-end 底部對(duì)齊
center 中部對(duì)齊
stretch 拉長(zhǎng)對(duì)齊 flex鍵
flex鍵的類型是數(shù)值，取值為0或者為1,默認(rèn)值是0,當(dāng)它的值為1時(shí)呈枉，子組件將自動(dòng)縮放以適應(yīng)父組件剩下的空白空間
alignSelf鍵
有5種可能的字符串類型值：auto趁尼、flex-start、flex-end猖辫、center酥泞、strech。 是讓組件忽略它的父組件樣式中的alignItems鍵的取值啃憎。
View組件的回調(diào)函數(shù)
onPressStart,onPressMove,onPressEnd三個(gè)函數(shù)分別代表開始觸摸事件芝囤、觸摸點(diǎn)移動(dòng)事件和觸摸結(jié)束事件。這三個(gè)回調(diào)函數(shù)都會(huì)收到一個(gè)event對(duì)象參數(shù)辛萍∶蹑ⅲ基本結(jié)構(gòu)為;
{
timeStamp:aNumber,
nativeEvent:{
locationX:aNumber,
locationY:aNumber,
}
}
export default class Project19 extends Component {
_onTouchMove(event){
console.log("touch move:" + event.timeStamp + ',X')
+ event.nativeEvent.locationX + ',Y' + event.nativeEvent.locationY;
}
_onTouchStart(event){
console.log("touch start:" + event.timeStamp + ',X')
+ event.nativeEvent.locationX + ',Y' + event.nativeEvent.locationY;
}
_onTouchEnd(event){
console.log("touch end:" + event.timeStamp + ',X')
+ event.nativeEvent.locationX + ',Y' + event.nativeEvent.locationY;
}
render() {
return (
<View style={styles.container}
onTouchStart={this._onTouchStart}
onTouchMove={this._onTouchMove}
onTouchEnd={this._onTouchEnd}>
</View>
);
}
}
有個(gè)特殊的特性：就是在React Native開發(fā)中，通常是在最上層的組件中處理觸摸事件的叹阔；但這三個(gè)回調(diào)函數(shù)總能收到事件挠轴，而不管用戶當(dāng)前觸摸區(qū)域是空白的，還是有其他組件已經(jīng)處理了觸摸事件耳幢。
PinterEvents屬性
pointerEvents是字符串類型的屬性岸晦，它可以取值為none、box-none睛藻、box-only启上、auto
- none 發(fā)生在本組件與本組件的子組件上的觸摸事件都會(huì)交給本組件的父組件處理.
- box-none 發(fā)生在本組件顯示范圍內(nèi),但不是子組件顯示范圍內(nèi)的事件交給本組件,在子組件顯示范圍內(nèi)交給子組件處理
- box-only 發(fā)生在本組件顯示范圍內(nèi)的觸摸事件將全部由本組件處理,即使觸摸事件發(fā)生在本組件的子組件顯示范圍內(nèi)
- auto 視組件的不同而不同,并不是所有的子組件都支持box-none和box-only兩個(gè)值,
export default class Project19 extends Component {
constructor(props){
super(props);
this.state = {
bigButtonPointerEvents:null,
};
this.onBigButtonPressed = this.onBigButtonPressed.bind(this);
this.onSmallButtonPressed = this.onSmallButtonPressed.bind(this);
}
onBigButtonPressed(){
console.log('Big button pressed');
}
onSmallButtonPressed(){
if (this.state.bigButtonPointerEvents === null) {
console.log('big button will not responde');
this.setState({bigButtonPointerEvents:'none'});
return;
}
console.log('big button will responde');
this.setState({bigButtonPointerEvents: 'box-none'});//改變狀態(tài)機(jī)變量
}
render(){
return(
<View style={styles.container}>
<Text style={styles.sButtonStyle}
onPress={this.onSmallButtonPressed}>
Sma Button
</Text>
<Text style={styles.bButtonStyle}
onPress={this.onBigButtonPressed}
pointerEvents={this.state.bigButtonPointEvents}>
Big button
</Text>
</View>
);
}
}
Image組件
- 加載網(wǎng)絡(luò)圖片
//圖片地址 var imageAddress = 'http://qq.111cn.net/uploads/allimg/140712/22020H9C-22.jpg'; export default class Project19 extends Component { render(){ return( <View style={styles.container}> <Image style={styles.imageStyle} //加載網(wǎng)絡(luò)圖片的資源 source={{uri:imageAddress}}/> </View> ); } } - 本地加載圖片
在RN開發(fā)中,需要預(yù)先加載靜態(tài)的圖片資源,如下，其中需要在項(xiàng)目目錄下創(chuàng)建image文件夾, 里面放置big_star.png店印。
class AwesomeProject extends Component {
render() {
return (
//根View
<View style={styles.container}>
<Image style={styles.imageStyle}
source={require('./image/big_star.png')}/>
</View>
);
}
}
在ReactNative開發(fā)中冈在，不允許使用字符串變量來指定需要預(yù)先加載的圖片名稱。因?yàn)镽eact native在編譯代碼是處理所有的require聲明按摘，還不是在動(dòng)態(tài)的處理包券，所以不能動(dòng)態(tài)加載圖片資源。
- resizeMode模式的三種樣式：contain, cover和stretch.默認(rèn)值是cover.
- cover模式只求在顯示比例不失真的情況下填充整個(gè)顯示區(qū)域炫贤〗蹋可以對(duì)圖片進(jìn)行放大或者縮小，超出顯示區(qū)域的部分不顯示兰珍， 也就是說侍郭，圖片可能部分會(huì)顯示不了。
- contain模式是要求顯示整張圖片, 可以對(duì)它進(jìn)行等比縮小, 圖片會(huì)顯示完整,可能會(huì)露出Image控件的底色。 如果圖片寬高都小于控件寬高亮元，則不會(huì)對(duì)圖片進(jìn)行放大猛计。
- stretch模式不考慮保持圖片原來的寬,高比.填充整個(gè)Image定義的顯示區(qū)域,這種模式顯示的圖片可能會(huì)畸形和失真。
- center模式, 9月11號(hào)的0.33版本才支持爆捞，contain模式基礎(chǔ)上支持等比放大奉瘤。
可觸摸組件
- TouchableHighlight
當(dāng)一個(gè)組件成為TouchableHighlight組件的子組件后,這個(gè)組件觸摸時(shí)會(huì)產(chǎn)生一種變暗的效果,原理就是讓被子組件遮蓋住的下一層顏色向上透出來,這樣就使子組件變暗或顏色, 默認(rèn)透?jìng)魃蟻硎呛谏? 可以通過underlayColor指定透?jìng)鞯念伾ctiveOpacity屬性可以指定透明度. 默認(rèn)是0.8嵌削。
export default class Project19 extends Component {
render(){
return(
<View style={{flex: 1, backroundColor:'white'}}>
<TouchableHighlight>
<View style={{width:120, height:70, backgroundColor:'grey'}}/>
</TouchableHighlight>
</View>
);
}
}
- 其他屬性回調(diào)
- onPress 點(diǎn)擊事件回調(diào)函數(shù)
- onLongPress 長(zhǎng)按事件
- delayLongPress 設(shè)置長(zhǎng)按事件的時(shí)長(zhǎng)是多少毫 米 默認(rèn)是500ms
- delayPressOut 設(shè)置離開屏幕多少毫秒后
- onPressOut事件被激活, 默認(rèn)是0
- delayPressIn 設(shè)置手指觸摸屏幕多少毫米厚,
- onPressIn事件被激活,默認(rèn)是0
隨筆
justifyContent：在彈性盒對(duì)象的 <div> 元素中的各項(xiàng)周圍留有空白
