Javascript 从重叠的panResponder在基础PhotoView上触发onTap

我有一个场景，它使用了一个PanResonard和一个来自react原生photoView Api的

。panResponder处理

中一个圆圈的动画，而

处理背景图像的点击和捏缩缩放。

的圆圈（im使用的标记）呈现在图像的顶部，但它不包含在图像中（它不嵌套在图像中），因为这在Api中是不可能的，所以它们与常见的

父对象是同级的

我试图实现的是：我希望能够获得标记相对于背景图像的坐标，如果背景图像被放大，我希望标记坐标相应地更新。因此，如果我按下标记，当它在图像中的人的头部上方时，我期望图像中头部的坐标

API提供了回调函数onTap，我可以轻松地从图像中获取正确的缩放x和y值。

，标记，我可以根据panResponder提供的父视图轻松获得坐标。因此我设想，如果我可以为

的onTap函数注册标记的点击，这将触发回调函数，我将获得包含该位置的缩放（x，y）对的事件

问题：由于标记与

重叠，并且它们没有嵌套，因此标记的onTap不会触发

的onTap，这可能是预期的

下面是我的render方法中提到的代码

    return (
    <View style={{ flex: 1 }}>
    <View style={styles.container}>
        <PhotoView
         onViewTap={(data) => }
         onLoadEnd={(e) => }
         onLoadStart={(event) =>}
         source={{ uri:  }}
         onLoad={(event) =>}
         onTap={(event) => console.log(`onTap called: 
         ${event.nativeEvent.x} ${event.nativeEvent.y}`)}
         onScale={() => }
         minimumZoomScale={1}
         maximumZoomScale={3}
         scale={this.state.scale}
         resizeMode={'contain'}
         androidScaleType={'fitXY'}
        />
    <View
        pointerEvents={this.pointer}
        style={styles.draggableContainer}>
        <Animated.View
            {...this.panResponder.panHandlers}
            style={[this.state.xy, styles.circle]}>
        </Animated.View>
    </View>
    </View>
</View>

)

然后，我的想法是记录panResponder2所寻求的值，这是魔法应该发生的地方，但目前魔法力量相当缺乏

this.panResponderImage = PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: Animated.event([null, {
        dx: this.state.pan2.x,
        dy: this.state.pan2.y
    }]),
    onPanResponderRelease: (e) => {
        this.state.pan2.setOffset({
            x: this.currentPanValue2.x, y: this.currentPanValue2.y
        });
        console.log((e.nativeEvent.pageX - (this.currentPanValue2.x)),
             (e.nativeEvent.pageY - this.currentPanValue2.y));

        this.state.pan2.setValue({ x: 0, y: 0 });
    }
});

因此，使用这种新方法，我基本上是在尝试onTap调用已经完成的工作，这感觉像是在浪费每个人的时间，但是，如果我能让它工作起来，我可以忽略这个小小的烦恼

你能看到我需要在哪里加x或y吗？你以前做过类似的事情吗？也许你知道我应该怎么做？为了获得最佳值，我必须在panResponderRelease（）中采取哪些必要步骤

谢谢你的阅读，祝你度过愉快的一天

this.panResponderImage = PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: Animated.event([null, {
        dx: this.state.pan2.x,
        dy: this.state.pan2.y
    }]),
    onPanResponderRelease: (e) => {
        this.state.pan2.setOffset({
            x: this.currentPanValue2.x, y: this.currentPanValue2.y
        });
        console.log((e.nativeEvent.pageX - (this.currentPanValue2.x)),
             (e.nativeEvent.pageY - this.currentPanValue2.y));

        this.state.pan2.setValue({ x: 0, y: 0 });
    }
});