React-Native開發四 React Native 的Touchable元件
阿新 • • 發佈:2018-11-01
1 Touchable元件簡介
Touchable元件是RN的按鈕元件,一共有四大類
TouchableWithoutFeedback:不帶任何反饋的可觸控元件
TouchableHighlight:在TouchableWithoutFeedback的基礎上添加了當按下時背景會變暗的效果。
TouchableOpacity:相比TouchableHighlight在按下去會使背景變暗的效果,TouchableOpacity會在使用者手指按下時降低按鈕的透明度,而不會改變背景的顏色。
TouchableNativeFeedback:在Android上還可以使用TouchableNativeFeedback,它會在使用者手指按下時形成類似水波紋的視覺效果。注意,此元件只支援Android。
2 Touchable元件使用
Touchable元件主要用作按鈕使用,可以處理一下事件
1 onPress function
當觸控操作結束時呼叫,但如果被取消了則不呼叫(譬如響應者被一個滾動操作取代),一般可用作點選事件
render(){
return(
<View style={styles.container}>
<TouchableOpacity onPress={this._onPress.bind(this)} }>
<Text >onPress</Text>
</TouchableOpacity>
</View>
);
}
_onPress(){
console.log("onPress");
}
2 onLongPress function
長按事件,長按按鈕時觸發
<TouchableOpacity onLongPress={this._onLongPress.bind(this)}>
<Text>onLongPress</Text >
</TouchableOpacity>
_onLongPress(){
console.log("onLongPress");
}
3 disabled bool
禁止使能,長用於禁止按下等操作,是Touchable元件的屬性之一
<TouchableOpacity disabled={true}>
<Text>無法點選</Text>
</TouchableOpacity>
4 onPressIn function
表示使用者點選時開始按下時,類似於Android中的Action_down事件
5 onPressOut function
表示使用者點選時將要結束時,類似於Android中的Action_up事件
onPressIn 與onPressOut結合可以計算使用者按下的時間。
<TouchableOpacity onPressIn={this._pressIn.bind(this)} onPressOut={this._pressOut.bind(this)}>
<Text>測試按下的時間</Text>
</TouchableOpacity>
_pressIn(){
console.log("pressIn");
}
_pressOut(){
console.log("pressOut");
}