本文转载自 https://www.jianshu.com/p/a840d2e9a312
一 前言
1.React Native 中,手势监听的两种方式
①.标签中有许多 on
开头的属性
在不同标签上有的属性是不能做出相应的响应的,比如下面的例子,同样的属性,在View上不可使用,在Text上就可以
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 实例化一个View */}
<View style={styles.testViewStyle} onPressIn={() => {alert('点击')}}>
</View>
{/* 实例化一个Text */}
<Text style={styles.testTextStyle} onPress={() => {alert('点击')}}></Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:'gray'
},
testViewStyle: {
// 设置尺寸
width:width,
height:40,
marginTop:20,
// 设置背景颜色
backgroundColor:'red'
},
testTextStyle: {
// 设置尺寸
width:width,
height:40,
marginTop:20,
// 设置背景颜色
backgroundColor:'yellow'
}
});
效果:
②.为了避免上面问题,在开发中推荐使用 Touchable 的方式来实现用户点击事件的包装
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
效果:
完成上面的步骤我们就可以使用Touchable来包装我们的标签了,格式如下
<TouchableOpacity Touchable属性>
<需要包装的标签></需要包装的标签>
</TouchableOpacity>
这里就来将上面的方式更改一下,从中可以看出,不仅可以让标签有接收触摸事件能力,还出现了不透明的效果(类似于高亮的效果)
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 包装View */}
<TouchableOpacity
onPress={() => {alert('点击了View')}}
>
<View style={styles.testViewStyle}></View>
</TouchableOpacity>
{/* 包装Text */}
<TouchableOpacity
onPress={() => {alert('点击了Text')}}
>
<Text style={styles.testTextStyle}></Text>
</TouchableOpacity>
</View>
);
}
});
二 Touchable 常用属性介绍
1.Touchable 中包含两种触摸类别:
①TouchableHighlight(高亮触摸)
当手指点下的时候,该视图的不透明度会进行降低同时会看到相应的颜色(原理:在底层新添加一个View),需要注意的是TouchableHighlight只能进行一层嵌套,不能多层嵌套,如果需要多层嵌套就要用View包装
- TouchableWithoutFeedback:这个属性说明了这个组件继承了所有
TouchableWithoutFeedback
的属性 - disabled:如果为true,则禁止此组件的一切交互
- hitSlop {top: number, left: number, bottom: number, right: number}:这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset(见下文)变得更大。 注意:触摸范围不会超过父视图的边界,也不会影响原先和本组件层叠的视图(保留原先的触摸优先级)
- onLayout{nativeEvent: {layout: {x, y, width, height}}}:当加载或者布局改变的时候被调用
- onLongPress:长按
- onPress:点击
- onPressIn:按住
- onPressOut:抬起
- pressRetentionOffset {top: number, left: number, bottom: number, right: number}:在当前视图不能滚动的前提下指定这个属性,可以决定当手指移开多远距离之后,会不再激活按钮。但如果手指再次移回范围内,按钮会被再次激活。只要视图不能滚动,你可以来回多次这样的操作。确保你传入一个常量来减少内存分配
- underlayColor:当触摸或者点击控件的时候显示出的颜色
- style:可以设置控件的风格演示,该风格演示可以参考View组件的style
- onShowUnderlay:当底层显示的时候调用
- onHideUnderlay:当底层被隐藏的时候调用
- activeOpacity:设置组件在进行触摸时候,显示的不透明度(取值:0 ~ 1)
②TouchableOpacity(不透明触摸)
该组件封装了响应触摸事件,当点击按下的时候,该组件的透明度会降低
- activeOpacity:设置当用户触摸的时候,组件的透明度(取值:0 ~ 1)
- TouchableWithoutFeedback:这个属性说明了这个组件继承了所有
TouchableWithoutFeedback
的属性 - disabled:如果为true,则禁止此组件的一切交互
- hitSlop {top: number, left: number, bottom: number, right: number}:这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset(见下文)变得更大。 注意:触摸范围不会超过父视图的边界,也不会影响原先和本组件层叠的视图(保留原先的触摸优先级)
- onLayout{nativeEvent: {layout: {x, y, width, height}}}:当加载或者布局改变的时候被调用
- onLongPress:长按
- onPress:点击
- onPressIn:按住
- onPressOut:抬起
- pressRetentionOffset {top: number, left: number, bottom: number, right: number}:在当前视图不能滚动的前提下指定这个属性,可以决定当手指移开多远距离之后,会不再激活按钮。但如果手指再次移回范围内,按钮会被再次激活。只要视图不能滚动,你可以来回多次这样的操作。确保你传入一个常量来减少内存分配
2.常见的触摸事件演示
①.TouchableHighlight(高亮触摸)
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 点击 */}
<TouchableHighlight
onPress={() => {alert('点击')}}
underlayColor={'red'}
>
<View style={styles.testViewStyle}></View>
</TouchableHighlight>
{/* 按下 */}
<TouchableHighlight
onPressIn={() => {alert('按下')}}
underlayColor={'orange'}
>
<View style={styles.testViewStyle}></View>
</TouchableHighlight>
{/* 抬起 */}
<TouchableHighlight
onPressOut={() => {alert('抬起')}}
underlayColor={'blue'}
>
<View style={styles.testViewStyle}></View>
</TouchableHighlight>
{/* 长按 */}
<TouchableHighlight
onLongPress={() => {alert('长按')}}
underlayColor={'yellow'}
>
<View style={styles.testViewStyle}></View>
</TouchableHighlight>
</View>
);
}
});
效果:
②TouchableOpacity(不透明触摸)
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 点击 */}
<TouchableOpacity
onPress={() => {alert('点击')}}
>
<View style={styles.testViewStyle}></View>
</TouchableOpacity>
{/* 按下 */}
<TouchableOpacity
onPressIn={() => {alert('按下')}}
>
<View style={styles.testViewStyle}></View>
</TouchableOpacity>
{/* 抬起 */}
<TouchableOpacity
onPressOut={() => {alert('抬起')}}
>
<View style={styles.testViewStyle}></View>
</TouchableOpacity>
{/* 长按 */}
<TouchableOpacity
onLongPress={() => {alert('长按')}}
>
<View style={styles.testViewStyle}></View>
</TouchableOpacity>
</View>
);
}
});
效果:
链接:https://www.jianshu.com/p/a840d2e9a312