我们在做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. CheckBoxList 获取与设置选中的值

    /// <summary> ///CheckBoxListHelper 的摘要说明 ///CheckBoxList获取与设置选中的值 /// </summary> public ...

  2. WPF博客地址分享

    http://www.cnblogs.com/chenxizhang/archive/2010/03/25/1694604.html http://www.cnblogs.com/lzhp/archi ...

  3. No bean named 'transactionManager' is defined

    2016-10-20 23:27:17.771 INFO 7096 --- [ main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped &quo ...

  4. cache设计,以及多核造成的不一致性以及解决方案

    http://www.360doc.com/content/11/1013/00/1317564_155625188.shtml http://blog.csdn.net/muxiqingyang/a ...

  5. 【算法】 输入n 输出一个n*n的zigzag矩阵 利用c++实现

    int main() { int N; cin>>N; int **a = new int *[N]; ) ;//如果没有申请到空间 ;i<N;i++) { a[i]= new in ...

  6. 【Java】JTable组件的构造函数和设置列宽

    使用JTable组件 类层次结构图: java.lang.Object --java.awt.Component --java.awt.Container --javax.swing.JCompone ...

  7. 使用PHP处理POST上传时$_FILES数组为何为空

    在做一个简单的表单上传测试时,服务端的php脚本中,$_FILES数组为空;这样就不能获取从浏览器上传的信息.什么原因呢? 通过Google,找到下面这个web: php上传文件$_FILES数组为空 ...

  8. JQUERY 选择器 总结,比较全

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  9. Linux下安装Wine运行windows程序

    资料 首页 https://www.winehq.org/ 安装 https://www.winehq.org/download/ 教程 https://www.winehq.org/document ...

  10. ASP.NET Cache

    ASP.NET为了方便我们访问Cache,在HttpRuntime类中加了一个静态属性Cache,这样,我们就可以在任意地方使用Cache的功能. 而且,ASP.NET还给它增加了二个“快捷方式”:P ...