我想在我的应用程序中有一个类似 AppStore 的购买流程。
我不确定在 react-native 中做 (2) 的最佳方法是什么。
我可以使用响应系统(即 PanResponder)拦截整个屏幕的触摸。但是,触摸永远不会到达购买按钮(
TouchableWithHighlight
控件)。触摸事件包含被触摸元素的节点id,可以与想要的元素进行比较,但这非常困难,因为可触摸区域可能包含多个节点。
这怎么可能接近?
最佳答案
我目前已经确定了这种方法:
这工作得很好。由于在拦截模式下不需要滚动,我们不必考虑屏幕上的目标位置发生变化。但是,动画可能有问题。
var EventEmitter = require('events').EventEmitter
UIManager = require('NativeModules').UIManager;
var CaptureAll = React.createClass({
_panResponder: {},
_isBlocking: false,
_allowedRect: null,
componentWillMount: function() {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponderCapture: this._handleStartShouldSetPanResponderCapture,
onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture,
onPanResponderGrant: this._handlePanResponderGrant,
onPanResponderMove: this._handlePanResponderMove,
onPanResponderRelease: this._handlePanResponderEnd,
onPanResponderTerminate: this._handlePanResponderEnd,
});
this.eventEmitter = new EventEmitter();
},
render: function() {
return (
<View style={this.props.style} {...this._panResponder.panHandlers}>{this.props.children}</View>
);
},
_handleStartShouldSetPanResponderCapture: function(e: Object, gestureState: Object): boolean {
// If we are not blocking, do not intercept
if (!this.isBlocking)
return false;
// Let the touch through if it is in the allowed rect
if (this.allowedRect && e.touchHistory.indexOfSingleActiveTouch) {
var touch = e.touchHistory.touchBank[e.touchHistory.indexOfSingleActiveTouch];
var r = this.allowedRect;
if (touch.currentPageX >= r.x && touch.currentPageX <= (r.x + r.w)
&& touch.currentPageY >= r.y && touch.currentPageY <= (r.y + r.h)
)
return false;
}
// Intercept and block this touch
this.eventEmitter.emit('block', { panEvent: e });
return true;
},
_handleMoveShouldSetPanResponderCapture: function(e: Object, gestureState: Object): boolean {
return this._handleStartShouldSetPanResponderCapture(e, gestureState);
},
_handlePanResponderGrant: function(e: Object, gestureState: Object) {},
_handlePanResponderMove: function(e: Object, gestureState: Object) {},
_handlePanResponderEnd: function(e: Object, gestureState: Object) {},
blockExceptRect: function(x, y, w, h) {
this.isBlocking = true;
this.allowedRect = {x, y, w, h}
},
blockExceptComponent: function(component) {
// Do not wait for the callback to block
this.isBlocking = true;
this.allowedRect = null;
let handle = React.findNodeHandle(component);
UIManager.measure(
handle,
(x, y, w, h, px, py) => {
this.blockExceptRect(px, py, w, h);
});
},
unblock: function() {
this.isBlocking = false;
this.allowedRect = null;
},
addListener: function(callback) {
this.eventEmitter.addListener('block', callback);
}
});
关于ios - 捕获全局手势(如何构建 AppStore "BUY"按钮),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32439296/