一、Touchable系列組件
Touchable系列組件可以包裹一層根View,響應點擊變化和點擊事件
1.1 例如TouchableWithoutFeedback,只可以處理點擊或長按響應,不能修改點擊的顏色透明度變化,使用代碼例子如下:
<TouchableWithoutFeedback
onPress={
()=>{
this.setState({
count: this.state.count+1
})
}
}
onLongPress={
()=>{
Alert.alert('提示','確認刪除嗎?',[
{text:'取消',onPress:()=>{},style:'cancel'},
{text:'確定',onPress:()=>{}},
])
}
}>
<View style={styles.button}>
<Text style={styles.buttonText}>
我是TouchableWithoutFeedback,單擊我
</Text>
</View>
</TouchableWithoutFeedback>
<Text style={styles.text}>您單擊了:{this.state.count}次</Text>
</View>
1.1.1、 按鈕在請求網絡時不允許再次點擊,disable
使用例子:
onPress={
()=>{
this.setState({
count: this.state.count+1,
text:'正在登錄...',
waiting:true
})
setTimeout(()=>{
this.setState({text:'網絡不流暢',waiting:false})
},2000);
}
}
1.2、 TouchableHighlight :設置按下的不透明度,可以通過屬性underLayColor設置TouchableHighLight被按下時的不透明度
underlayColor: 設置TouchbleHighLight按下去的顏色,默認黑色
activeOpacity: 不透明度
使用例子:
<TouchableHighlight
activeOpacity={0.7}
underlayColor='green'
onPress={
()=>{
this.setState({
count: this.state.count+1,
text:'正在登錄...',
waiting:true
})
setTimeout(()=>{
this.setState({text:'網絡不流暢',waiting:false})
},2000);
}
}
react-native入門——touchable系列按鈕使用
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.