- 第1节:React 入门
- 第2节:React 安装 Android 运行环境
- 第3节:React Native 样式
- 第4节:React Native 手势应答系统
- 第5节:React Native 辅助功能
- 第6节:React Native 模块(iOS)
- 第7节:React Native UI 组件(iOS)
- 第8节:React Native UI 组件(Android)
- 第9节:React Native 调试 React Native 应用
- 第10节:React Native 测试
- 第11节:React Native 在设备上运行
- 第12节:React Native 在设备上运行(Android)
- 第13节:React Native 与现有的应用程序集成
- 第14节:React Native JavaScript 环境
- 第15节:React Native 已知 Issues
- 第16节:React Native iOS 活动指示器
- 第17节:React Native iOS 日期选择器
- 第18节:React Native DrawerLayoutAndroid
- 第19节:React Native 图片
- 第20节:React Native 列表视图
- 第21节:React Native Map 视图
- 第22节:React Native 导航器
- 第23节:React Native iOS 导航器
- 第24节:React Native iOS 选择器
- 第25节:React Native ProgressBarAndroid
- 第26节:React Native 滚动视图
- 第27节:React Native iOS 滑块
- 第28节:React Native SwitchAndroid
- 第29节:React Native iOS 开关
- 第30节:React Native iOS 选项卡
- 第31节:React Native TabBarIOS.Item
- 第32节:React Native 文本
- 第33节:React Native 文本输入
- 第34节:React Native ToolbarAndroid
- 第35节:React Native 高亮触摸
- 第36节:React Native 不透明触摸
- 第37节:React Native 无反馈触摸
- 第38节:React Native 视图
- 第39节:React Native Web 视图
- 第40节:React Native iOS 警告
- 第41节:React Native 应用程序注册表
- 第42节:React Native iOS 应用程序状态
- 第43节:React Native 异步存储
- 第44节:React Native BackAndroid
- 第45节:React Native 相机滚动
- 第46节:React Native 交互管理器
- 第47节:React Native 动画布局
- 第48节:React Native iOS 链接
- 第49节:React Native 网络信息
- 第50节:React Native 全景响应器
- 第51节:React Native 像素比率
- 第52节:React Native iOS 推送通知
- 第53节:React Native iOS 状态栏
- 第54节:React Native 样式表
- 第55节:React Native ToastAndroid
- 第56节:React Native iOS 震动
- 第57节:React Native Flexbox
- 第58节:React Native 定位
- 第59节:React Native 网络
- 第60节:React Native 计时器
React Native 全景响应器
PanResponder
将几个触发调节成一个单一的触发动作。该方法可以使单一触发动作对额外的触发具有弹性,可以用来识别简单的多点触发动作。
它为响应处理程序提供了一个可预测包,这个相应处理程序是由动作应答系统提供的。对每一个处理程序,在正常事件旁提供了一个新的 gestureState
对象。 一个 gestureState
对象有以下属性:
stateID
-gestureState 的ID-在屏幕上保持至少一个触发动作的时间moveX
-最近动态触发的最新的屏幕坐标x0
-应答器横向的屏幕坐标y0
-应答器纵向的屏幕坐标dx
-触发开始后累积的横向动作距离dy
-触发开始后累积的纵向动作距离vx
-当前手势的横向速度vy
-当前手势的纵向速度numberActiveTouch
-屏幕上当前触发的数量
基本用法 componentWillMount: function() {
this._panGesture = PanResponder.create({ // Ask to be the responder: onStartShouldSetPanResponder: (evt, gestureState) => true, onStartShouldSetPanResponderCapture: (evt, gestureState) => true, onMoveShouldSetPanResponder: (evt, gestureState) => true, onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, onPanResponderGrant: (evt, gestureState) => { // The guesture has started. Show visual feedback so the user knows // what is happening! // gestureState.{x,y}0 will be set to zero now
}, onPanResponderMove: (evt, gestureState) => { // The most recent move distance is gestureState.move{X,Y} // The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
}, onResponderTerminationRequest: (evt, gestureState) => true, onPanResponderRelease: (evt, gestureState) => { // The user has released all touches while this view is the // responder. This typically means a gesture has succeeded
}, onPanResponderTerminate: (evt, gestureState) => { // Another component has become the responder, so this gesture // should be cancelled
},
});
}, render: function() { return (
<View {...this._panResponder.panHandlers} />
);
},
工程实例
componentWillMount: function() {
this._panGesture = PanResponder.create({ // Ask to be the responder: onStartShouldSetPanResponder: (evt, gestureState) => true, onStartShouldSetPanResponderCapture: (evt, gestureState) => true, onMoveShouldSetPanResponder: (evt, gestureState) => true, onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, onPanResponderGrant: (evt, gestureState) => { // The guesture has started. Show visual feedback so the user knows // what is happening! // gestureState.{x,y}0 will be set to zero now
}, onPanResponderMove: (evt, gestureState) => { // The most recent move distance is gestureState.move{X,Y} // The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
}, onResponderTerminationRequest: (evt, gestureState) => true, onPanResponderRelease: (evt, gestureState) => { // The user has released all touches while this view is the // responder. This typically means a gesture has succeeded
}, onPanResponderTerminate: (evt, gestureState) => { // Another component has become the responder, so this gesture // should be cancelled
},
});
}, render: function() { return (
<View {...this._panResponder.panHandlers} />
);
},
想要查看它的实际应用,尝试 PanResponder example in UIExplorer。
方法
static create(config: object)
@param {object} 所有应答器回调配置的增强版本,应答器回调不仅可以提供典型的 ResponderSyntheticEvent
,还可以提供 PanResponder
动作状态。在每一个典型的 onResponder*
回调中,用 PanResponder
对 Responder
做简单的替换。例如, config
对象可能看起来像如下形式:
onMoveShouldSetPanResponder: (e, gestureState) => {...}
onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
onStartShouldSetPanResponder: (e, gestureState) => {...}
onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
onPanResponderReject: (e, gestureState) => {...}
onPanResponderGrant: (e, gestureState) => {...}
onPanResponderStart: (e, gestureState) => {...}
onPanResponderEnd: (e, gestureState) => {...}
onPanResponderRelease: (e, gestureState) => {...}
onPanResponderMove: (e, gestureState) => {...}
onPanResponderTerminate: (e, gestureState) => {...}
onPanResponderTerminationRequest: (e, gestureState) => {...}
一般来说,对于那些捕获的等价事件,我们在捕获阶段更新一次 gestureState ,并且也可以在冒泡阶段使用。
在 onStartShould* 回调时需要注意一点。在对节点的捕获/冒泡阶段的开始/结束事件中,它们只对更新后的gestureState
做出反应。一旦节点成为应答器,你可以依靠每一个被动作和 gestureState
处理后相应更新的开始/结束事件。 (numberActiveTouches) 可能不完全准确,除非你是应答器。