React-native 中的触摸响应功能
2024-04-01 11:35:48
我们在做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} />
);
},
//注释一下：
最新文章
- [Android]一个干净的架构（翻译）
- WinForm------GridControl添加底部合计框
- 关于javaScript单线程的见解
- 【转】【RDS教程】专业DBA速成 - CPU优化篇
- table中bordercolor属性设置后最新ie浏览器或firefox中不显示边线，借助table的css来实现边线
- 解决maven项目移动
- Python: Convert rst to html
- 《ASP.NET1200例》未能找到元数据文件解决办法
- BaseActivity与BaseFragment的封装
- Redis学习手册(Hashes数据类型)
- yii2 and short_open_tag
- IOS 错误集合以及解决办法（持续整理中）
- AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？
- kvm克隆
- Android开发技巧——ViewPager衍生出来的2个类
- redis多实例和高可用
- android应用程序中获取view的位置
- AssetBundle 策略
- 变量命名神器Codelf
- JAVA异常架构图及常见面试题