react-native 手势响应以及触摸事件的处理
react-native 的触摸事件:
TouchableHighlight , TouchableNativeFeedBack , TouchableOpacity , TouchableWithoutFeedBack。
在onPress事件触发的函数中都会携带事件参数(event)包含一个参数 :nativeEvent 参数如下
locationX 和 locationY 是触摸的位置相对于组件的位置
pageX 和 pageY 是触摸的位置相对于屏幕的位置
timestamp 是时间戳
手势操作 PanResponder
用法参见React-native实例:
componentWillMount: function() {
this._panResponder = PanResponder.create({
// 要求成为响应者:
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, onPanResponderGrant: (evt, gestureState) => {
// 开始手势操作。给用户一些视觉反馈,让他们知道发生了什么事情! // gestureState.{x,y} 现在会被设置为0
},
onPanResponderMove: (evt, gestureState) => {
// 最近一次的移动距离为gestureState.move{X,Y} // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
// 用户放开了所有的触摸点,且此时视图已经成为了响应者。
// 一般来说这意味着一个手势操作已经成功完成。
},
onPanResponderTerminate: (evt, gestureState) => {
// 另一个组件已经成为了新的响应者,所以当前手势将被取消。
},
onShouldBlockNativeResponder: (evt, gestureState) => {
// 返回一个布尔值,决定当前组件是否应该阻止原生组件成为JS响应者
// 默认返回true。目前暂时只支持android。
return true;
},
});
}, render: function() {
return (
<View {...this._panResponder.panHandlers} />
);
},
如果想要详细的了解触摸或者点击事件的机制或者详细的参数信息 参阅:RN官网https://reactnative.cn/docs/gesture-responder-system/ , https://reactnative.cn/docs/panresponder/ 以及这篇文章 :https://www.race604.com/react-native-touch-event/
react-native 手势响应以及触摸事件的处理的更多相关文章
- react native 手势响应
参考地址:https://www.jianshu.com/p/935e5c6a5064 官方文档地址:https://facebook.github.io/react-native/docs/panr ...
- 混合开发的大趋势之一React Native手势行为那些事
转载请注明出处:王亟亟的大牛之路 最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补. 话不多说先安利:htt ...
- 从零学React Native之09可触摸组件
可触摸组件有: TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback 1. Touc ...
- [技术博客]react native事件监听、与原生通信——实现对通知消息的响应
在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- IOS——触摸事件 视图检测和事件传递
iPhone上有非常流畅的用户触摸交互体验,能检测各种手势:点击,滑动,放大缩小,旋转.大多数情况都是用UI*GestureRecognizer这样的手势对象来关联手势事件和手势处理函数.也有时候,会 ...
- Android: 详解触摸事件如何传递
当视图的层次结构比较复杂的时候,触摸事件的响应流程也变得复杂. 举例来说,你也许有一天想要制作一个手势极其复杂的 Activity 来折磨你的用户,你经过简单思索,认为其中应该包含一个 PageVie ...
- 用 React 编写移动应用 React Native
转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...
- 【RN - 基础】之React Native组件的生命周期
下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...
随机推荐
- Linux 系统管理命令 - iftop - 动态显示网络接口流量信息
命令详解 重要星级: ★★★★☆ 功能说明: iftop 是一款实时流量监控工具,可用于监控 TCP/IP 连接等,必须以 root 用户的身份运行.一般最小化安装系统是没有这个命令的,需要使用 yu ...
- 立体渲染 Volumetric Rendering
基础概念 在3D游戏引擎中,球体.立方体以及所有其它复杂的集合体都是由三角面片组成的.引擎只会渲染物体的表面,比如球体,半透明物体等.整个世界由各种空壳构成. 立体渲染(Volumetric Rend ...
- spoj 371 Boxes【最小费用最大流】
对于ai==0连接(i,t,1,0),对于ai>1(s,i,ai-1,0),然后对以相邻的两个点(i,j)连接(i,j,inf,1),注意这里是一个环的形式,所以1和n+1相连 #include ...
- 洛谷P4116 Qtree3(树剖+线段树)
传送门 LCT秒天秒地 树剖比较裸的题了 用线段树记录一下区间的最左边的黑点的编号(因为同一条链上肯定是最左边的深度最小,到根节点距离最近) 然后记得树剖的时候肯定是越后面的答案越优,因为深度越浅 / ...
- 团队作业-项目Alpha版本发布
一. 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cn ...
- CF446C [DZY loves Fibonacci]
Description Transmission Gate 你需要维护一个长度为\(n \leq 300000\) 的数列,兹词两个操作: 1.给一个区间加上一个fibonacci数列,规定\(f[0 ...
- ssrs 2016, mobile report error: The report may be misconfigured, the data may not be available, or the server version may be unsupported.
使用多账户配置ssrs mobile report 权限后,使用客户端显示: 使用web 查阅,显示: 遇到这种情况,可能是由于,report引用了 数据集文件夹中的数据集,请记得把数据集文件夹上为该 ...
- JS 事件添加onclick写法注意。
自定义函数添加onclick事件写法注意. 错误写法:element.onclick = addclass(className); 正确写法:element.onclick = function(){ ...
- jsp中提示修改成功
修改成功提示 servert包 request.setAttribute("success", "修改失败"); 效果而 function f(){ var n ...
- asp.net网站接入QQ登录
这两天在做网站第三方登录,总结一下QQ登录吧,支付宝就不用了(下载dome把ID什么的换一换就基本可以了.),本文主要说的是代码的实现方式,逻辑部分主要还是根据帮助文档来的.不懂的同学可以先看看文档. ...