电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

reactnative触摸事件处理详细讲解

reactnative触摸事件处理详细讲解_第1页
1/13
reactnative触摸事件处理详细讲解_第2页
2/13
reactnative触摸事件处理详细讲解_第3页
3/13
reactnative 触摸事件处理详解 触控是移动设备的核心功能,也移动应用交互的基础,Android 和 iOS 各自都有完善的触摸事件处理机制。React Native(以下简称 RN)提供了一套统一的处理方式,能够方便的处理界面中组件的触摸事件、用户手势等。本文尝试介绍 RN 中触摸事件处理。1. RN 基本触摸组件RN 的组件除了 Text,其他组件默认是不支持点击事件,也不能响应基本触摸事件,所以 RN 中提供了几个直接处理响应事件的组件,基本上能够满大部分的点击处理需求TouchableHighlight, TouchableNativeFeedback, TouchableOpacity 和 TouchableWithoutFeedback。因为这几个组件的功能和使用方法基本类似,只是 Touch 的反馈效果不一样,所以一般我们用 Touchable** 代替。Touchable** 有如下几个回调方法:onPressIn:点击开始;onPressOut:点击完毕或者离开;onPress:单击事件回调;onLongPress:长按事件回调。它们的基本使用方法如下,这里以 TouchableHighlight 为例:TouchableHighlight onPressIn={() => console.log('onPressIn')} onPressOut={() => console.log('onPressOut')} onPress={() => console.log('onPress')} onLongPress={() => console.log('onLongPress')} > Image style={styles.button} source={require('./img/rn_logo.png')} />TouchableHighlight>RN 中提供的触摸组件使用非常简单,可以参考 官方文档,这里也不做详细的介绍了。下面主要介绍用户触摸事件处理。2. 单组件触摸事件处理我们知道,RN 的组件默认不进行处理触摸事件。组件要处理触摸事件,首先要“申请”成为摸事件的响应者(Responder),完成事件处理以后,会释放响应者的角色。一个触摸事件处理周期,是从用户手指按下屏幕,到用户抬起手指抬起完毕,这是用户的一次完整触摸操作。单个组件的单次操作交互处理的生命周期如下:我们来详细分析一下事件处理的生命周期,在整个事件处理的过程中,组件有可能处于两种身份中的一种,并且可以相互切换:非事件响应者和事件响应者。非事件响应者默认情况下,触摸事件输入不会直接传递给组件,不能进行事件响应处理,也就是非事件响应者。假如组件要进行触摸事件处理,首先要申请成为事件响应者,组件有如下两个属性可以做这样的申请:View.props.onStartShouldSetResponder,这个属性接收一个回调函数,函数原型是 function(evt): bool,在触摸事件开始(touchDow...

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

reactnative触摸事件处理详细讲解

确认删除?
VIP
微信客服
  • 扫码咨询
会员Q群
  • 会员专属群点击这里加入QQ群
客服邮箱
回到顶部