可点击的组件
高亮触摸 TouchableHighlight
- 当手指点击按下的时候,该视图的不透明度会进行降低同时会看到相应的颜色,其实现原理则是在底层新添加了一个View。此外,TouchableHighlight只能进行一层嵌套,不能多层嵌套。
常用属性:
activeOpacity number
设置组件在进行触摸的时候,显示的不透明度(取值在0-1之间)onHideUnderlay function 方法
当底层被隐藏的时候调用onShowUnderlay function 方法
当底层显示的时候调用style
可以设置控件的风格演示,该风格演示可以参考View组件的styleunderlayColor
当触摸或者点击控件的时候显示出的颜色
不透明触摸 TouchableOpacity
- 该组件封装了响应触摸事件;当点击按下的时候,该组件的透明度会降低。
- 常用属性:
- activeOpacity
设置当用户触摸的时候,组件的透明度(0~1),值越大越模糊,一般控制在0.5
- activeOpacity
常见的触摸事件
点击
onPress
<View style={styles.container}> <TouchableOpacity activeOpacity={0.5} onPress={() => this.activeEvent('点击')}> <View style={styles.innerViewStyle}> <Text>按钮</Text> </View> </TouchableOpacity> </View>
按下
onPressIn
<View style={styles.container}> <TouchableOpacity activeOpacity={0.5} onPressIn={() => this.activeEvent('按下')}> <View style={styles.innerViewStyle}> <Text>按钮</Text> </View> </TouchableOpacity> </View>
抬起
onPressOut
<View style={styles.container}> <TouchableOpacity activeOpacity={0.5} onPressOut={() => this.activeEvent('抬起')}> <View style={styles.innerViewStyle}> <Text>按钮</Text> </View> </TouchableOpacity> </View>
长按
onLongPress
<View style={styles.container}> <TouchableOpacity activeOpacity={0.5} onLongPress={() => this.activeEvent('长按')}> <View style={styles.innerViewStyle}> <Text>按钮</Text> </View> </TouchableOpacity> </View>