Touchable系列組件
為了能讓視圖能夠響應用的的點擊事件，我們需要借助Touchablexxx組件，來包裹我們的視圖受裹。
下面是四個Touchable系列的組件 一一舉例
- TouchableWithoutFeedback：響應用戶的點擊事件事扭，如果你想在處理點擊事件的同時不顯示任何視覺反饋，使用它是個不錯的選擇桶癣。
- TouchableHighlight：在TouchableWithoutFeedback的基礎上添加了當按下時背景會變暗的效果拥褂。
- TouchableOpacity：相比TouchableHighlight在按下去會使背景變暗的效果，TouchableOpacity會在用戶手指按下時降低按鈕的透明度牙寞，而不會改變背景的顏色饺鹃。
- TouchableNativeFeedback：在Android上還可以使用TouchableNativeFeedback莫秆，它會在用戶手指按下時形成類似水波紋的視覺效果。注意悔详，此組件只支持Android镊屎。
TouchableWithoutFeedback
TouchableWithoutFeedback一個Touchable系列組件中最基本的一個組價，只響應用戶的點擊事件不會做任何UI上的改變茄螃，在使用的過程中需要特別留意缝驳。
提示：無論是TouchableWithoutFeedback還是其他三種Touchable組件，都是在根節(jié)點都是只支持一個組件归苍，如果你需要多個組件同時相應單擊事件用狱，可以用一個View將它們包裹著，它的這種根節(jié)點只支持一個組件的特性和ScrollView很類似拼弃。也就是TouchableWithoutFeedback之下必須只含有一個子View
export default class TouchableWithoutFeedbackTest extends Component {
constructor(props){
super();
this.state={
count:0
}
}
render() {
return(
<View>
<TouchableWithoutFeedback
onPress={()=> {
this.setState({count: this.state.count+1})
}}
onLongPress={()=>{
Alert.alert('提示','確定要刪除嗎夏伊？',[
{text:'取消',onPress:()=>{}, style:'cancel'},
{text:'確定',onPress:()=>{}, style:''}
])
}}
delayLongPress={5000}>
<View style={styles.button}>
<Text style={styles.buttonText}>
我是TouchableWithoutFeedback,單擊我
</Text>
</View>
</TouchableWithoutFeedback>
<Text style={styles.text}>您單擊了:{this.state.count}次</Text>
</View>
)
}
}
const styles = StyleSheet.create({
button:{
borderWidth:1,
},
buttonText:{
fontSize:18
},
text:{
fontSize:25
}
});
里面是空間的點擊事件和長按事件
里面最常用的幾個屬性
- onPress(); 點擊的時候
- onLongPress();長按的時候
- delayLongPress();長按的時間間隔
- disabled true-禁止再次點擊 false-可以點擊 這個屬性可以達到禁用按鈕的效果
- onPressIn()在開始點擊的時候觸發(fā)的事件
- onPressOut() 在結束點擊的時候觸發(fā)的事件
- delayPressIn() 從用戶點擊按鈕到onPressIn 被回調的延時
- delayPressOut() 從用戶點擊按鈕后到onPressOut（）的延時時間
下面是 disabled的事例
export default class DisabledText extends Component {
constructor(props){
super();
this.state={
press:false,
text:'啥也沒有'
}
}
render() {
return (
<View>
<TouchableWithoutFeedback
onPress={()=>{
this.setState({
press:true,
text:'正在登陸....'
})
setTimeout(()=>{
this.setState({
press:false,
text:'暫時不能登錄....'
})
},2000)
}}
disabled={this.state.press}
>
<View>
<Text>
點幾發(fā)動機阿卡麗附近
</Text>
</View>
</TouchableWithoutFeedback>
<Text>
{this.state.text}
</Text>
</View>
)
}
}
TouchableHighlight的使用
TouchableHighlight 是Touchable系列組件中比較常用的一個，它是在TouchableWithoutFeedback 的基礎上添加了一些UI上的擴展吻氧，既當手指按下的時候署海，該視圖的不透明度會降低，同時會看到相應的顏色(視圖變暗或者變亮)医男，從TouchableHighlight 的源碼中我們可以看出砸狞，其實這個顏色就是在TouchableHighlight 的最外層個添加了一個View，通過改變這個View的背景色及透明度來達到這一效果镀梭。
- activeOpacity
我們可以通過activeOpacity來設置TouchableHighlight 被按下時的不透明度刀森，從TouchableHighlight 的源碼中可以看出，它的默認不透明度為0.85报账，我們可以根據需要進行調節(jié)研底。 - underlayColor 按下去的顏色 默認狀態(tài)下為balck黑色。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableWithoutFeedback,
Alert,
TouchableHighlight
} from 'react-native';
export default class TouchableHighlightTest extends Component {
constructor(props){
super();
this.state={
count:0
}
}
render() {
return(
<View>
<TouchableHighlight
activeOpacity={0.5}
underlayColor='green'
onHideUnderlay={()=>{
this.setState({text:'襯底被隱藏'})
}}
onShowUnderlay={()=>{
this.setState({text:'襯底顯示'})
}}
onPress={()=>{
}}
>
<View >
<Text >
TouchableHighlight
</Text>
</View>
</TouchableHighlight>
<Text>{this.state.text}</Text>
</View>
)
}
}
TouchableOpacity的使用
TouchableOpacity也是Touchable系列組件中比較常用的一個透罢，它是在TouchableWithoutFeedback的基礎上添加了一些UI上的擴展榜晦，但這些擴展相比TouchableHighlight 少了一個額外的顏色變化。它是通過在按下去改變視圖的不透明度來表示按鈕被點擊的羽圃。
在擴展屬性方面TouchableOpacity相比TouchableHighlight乾胶，就少了很多，只有一個activeOpacity朽寞，來設置按下去的透明度识窿。
export default class TouchableOpacityTest extends Component {
constructor(props){
super();
this.state={
count:0,
text:'d'
}
}
render() {
return(
<View>
<TouchableOpacity
activeOpacity={0.5}
onPress={()=>{
this.setState({
text:'點擊了'
})
}}>
<View>
<Text>
TouchableHighlight
</Text>
</View>
</TouchableOpacity>
<Text>{this.state.text}</Text>
</View>
)
}
}
TouchableNativeFeedback
為了支持Android5.0新增的觸控反饋，React Native加入了TouchableNativeFeedback 組件脑融，TouchableNativeFeedback 在TouchableWithoutFeedback 所支持的屬性的基礎上增加了按下去的水波紋效果喻频。我們可以通過background 屬性來自定義原生觸摸操作反饋的背景。(只支持android)
里面有個屬性 是 background
決定在觸摸反饋的時候顯示什么類型的背景肘迎。它接受一個有著type屬性和一些基于type屬性的額外數據的對象甥温。推薦使用以下的靜態(tài)方法之一來創(chuàng)建這個對象：
- TouchableNativeFeedback.SelectableBackground() - 會創(chuàng)建一個對象锻煌，表示安卓主題默認的對于被選中對象的背景。(?android:attr/selectableItemBackground)
- TouchableNativeFeedback.SelectableBackgroundBorderless() - 會創(chuàng)建一個對象姻蚓，表示安卓主題默認的對于被選中的無邊框對象的背景炼幔。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+適用史简。
- TouchableNativeFeedback.Ripple(color, borderless) - 會創(chuàng)建一個對象乃秀，當按鈕被按下時產生一個漣漪狀的背景，你可以通過color參數來指定顏色圆兵，如果參數borderless是true跺讯，那么漣漪還會渲染到視圖的范圍之外。（參見原生的actionbar buttons作為該效果的一個例子）殉农。這個背景類型只在Android API level 21+適用也就是Android5.0或以上設備刀脏。
export default class TouchableNativeFeedbackTest extends Component {
constructor(props){
super();
this.state={
count:0,
text:'d'
}
}
render() {
return(
<View>
<TouchableNativeFeedback
background={TouchableNativeFeedback.SelectableBackgroundBorderless()}>
onPress={()=>{
this.setState({
text:'點擊了'
})
}}>
<View>
<Text>
TouchableHighlig
</Text>
</View>
</TouchableNativeFeedback>
<Text>{this.state.text}</Text>
</View>
)
}
}
參考地址 傳送門
