我们在做APP的时候,与桌面应用系统不同的是触摸响应。

web页面对触摸响应的支持和原生的APP有着很大的差异。

基本用法

 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 现在会被设置为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} />
);
}, //注释一下:

React-native 中的触摸响应功能的更多相关文章

  1. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  2. react native中如何往服务器上传网络图片

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...

  3. React Native中加载指示器组件ActivityIndicator使用方法

    这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...

  4. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  5. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  6. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  7. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. React Native中的远程调试是不可靠的

    一.原因 当您发现rn app在关闭远程调试后,一些功能无法正常工作时,这很可能是由于设备上的JavaScript执行环境与远程调试器之间的细微差别造成的. 例如,日期问题,Date构造函数似乎接受C ...

  9. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

随机推荐

  1. 在C++中调用DLL中的函数

    如何在C++中调用DLL中的函数 应用程序使用DLL可以采用两种方式:一种是隐式链接,另一种是显式链接.在使用DLL之前首先要知道DLL中函数的结构信息.Visual C++6.0在VC\bin目录下 ...

  2. IOS,Object C学习过程中遇到的attributes

    @property 定义一个属性 @synthesize 告诉编译器自动为属性自动生成 getter 和setter方法 在定义属性的时候会用到如下@attributes nonatomic,告诉编译 ...

  3. POJ2528 线段树的区间操作

    首先应该对该[0,10000000]进行离散化 即先将点集进行排序,然后从小到大缩小其中的间距,使得最后点数不会超过2*n 然后就是线段树操作 只需进行染色,然后最后用nlgn进行一个个查询颜色记录即 ...

  4. js 动态计算折扣后总价格

    <script type="text/javascript"> <!---计算折扣后的总价格---> function outtotalprice(i) { ...

  5. SDOI2012Longge的问题

    2705: [SDOI2012]Longge的问题 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 930  Solved: 601[Submit][St ...

  6. windows获取窗口句柄

    1.使用FindWindow函数获取窗口句柄 示例:使用FindWindow函数获取窗口句柄,然后获得窗口大小和标题,并且移动窗口到指定位置. #include <Windows.h> # ...

  7. ehcache 分布式集群同步数据实例

    本文使用rmi方式,借鉴百度能搜到的文章,但是均不能做到数据同步,做了些改动完全没问题,更详细说明介绍百度即可.直奔主题,可运行的demo实例! 创建一个maven项目,配置pom pom.xml & ...

  8. POJ 2728 Desert King ★(01分数规划介绍 && 应用の最优比率生成树)

    [题意]每条路径有一个 cost 和 dist,求图中 sigma(cost) / sigma(dist) 最小的生成树. 标准的最优比率生成树,楼教主当年开场随手1YES然后把别人带错方向的题Orz ...

  9. Linux_2.6字符设备驱动实例

    第一步:my74hc595.c #include <linux/module.h> //模块所需的大量符号和函数定义#include <linux/init.h> //指定初始 ...

  10. GitHub进一步了解

    为什么要引入Git: 1)用简单一点的例子来讲: 一个公司有几个甚至十几个人共同合作开发一款项目的时候,公司对项目代码有明确规范,不可能再像学校做的小项目一样,你觉得哪个同学的代码写的不好,或者和你的 ...