我们在做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. SQLite设置主键自动增长及插入语法

    SQLite中,一个自增长字段定义为INTEGER PRIMARY KEY AUTOINCREMENT,那么在插入一个新数据时,只需要将这个字段的值指定为NULL,即可由引擎自动设定其值,引擎会设定为 ...

  2. Android性能优化之如何避免Overdraw

    什么是Overdraw? Overdraw就是过度绘制,是指在一帧的时间内(16.67ms)像素被绘制了多次,理论上一个像素每次只绘制一次是最优的,但是由于重叠的布局导致一些像素会被多次绘制,而每次绘 ...

  3. ActiveMQ可靠性机制

    消息的签收(Acknowledgment): 客户端成功接收一条消息的标志是这条消息被签收. 成功接收一条消息一般包括如下三个阶段: (1) 客户端接收消息  (2) 客户端处理消息   (3) 消息 ...

  4. android下升级软件介绍

    编译android: 生成:system.img,ramdisk.img,userdata.img映像文件. ramdisk.img是emulator的文件系统 system.img包括了主要的包.库 ...

  5. SharePoint2013切换帐户登录菜单

    SharePoint2013帐户姓名显示的地方没有切换帐户的菜单,这个功能对于终端用户是可有可无的,但对于sharepoint管理员或sharepoint开发人员来讲,却是一个很重要的菜单,由于经常要 ...

  6. Android开发UI之给ImageView添加蒙版

    ImageView控件添加蒙版, 通过属性:android:tint="" 比如 android:tint="#44ff0000"

  7. Windows下Vim设置

    进入安装目录,找到_vimrc文件,用文本编辑器打开,在前面加入下述内容 设置中文支持 " 设置编码自动识别, 中文引号显示 " set fileencodings=utf-8,c ...

  8. 使用Spring框架的12个开源项目

    使用Spring框架的12个开源项目 http://www.csdn.net/article/2013-10-14/2817176-open-source-projects-that-use-spri ...

  9. 走迷宫(DFS)

    题目:http://acm.sdut.edu.cn/sdutoj/showproblem.php?pid=2449&cid=1181 目前dfs 里的递归还是不很懂,AC代码如下: #incl ...

  10. poj2182

    首先容易知道,最后一个数是最容易确定的,于是从后往前确定 对于位置j,它的数就是1~n中剩余数的第a[j]+1小的数 这当然可以用平衡数做,复杂度为O(nlogn) 有没有更简洁得算法?树状数组+二分 ...