0

我正在尝试找到一种仅允许子节点捕获 Panresponder 手势的方法。我的目的是让子组件在父组件内自由移动。并且父组件不应该响应任何触摸。因此，它将无法移动。而且，子组件应该只能在父组件边界内移动。到目前为止，我已经创建了一个大圆圈组件。它有一个嵌套在其中的小圆圈。见下图， 点击查看图片 并且在父组件上设置了 Panresponder 属性。但是，当我开始拖动组件时，父组件也会响应触摸。这就是我在 componentWillMount 生命周期中编码的方式，

 this._panResponder = PanResponder.create({
            onStartShouldSetPanResponderCapture: () => false,
            onMoveShouldSetResponderCapture: () => false,
            onPanResponderTerminationRequest: () => true,

            onPanResponderGrant: (e, gestureState) => {
                Some.Code.Here
            },
            onPanResponderMove: (evt, gesture) => {
                Some.Code.Here
            },

            onPanResponderRelease: (e, gesture) => {
                Some.Code.Here
            },
        });

这是它在渲染方法中的样子，

return (
            <View {...this._panResponder.panHandlers}>
                <View>
                    <Animated.View
                        style={[panStyle, styles.circle]}
                        onTouchEnd={this.calculateMove}>
                        <View style={{ height: 20, width: 20, borderRadius: 10, backgroundColor: 'black', justifyContent: 'center', alignSelf: 'center' }} ></View>
                    </Animated.View>
                </View>
            </View>
        );

我的目标是制作最深的节点，即视图组件，它是在大圆圈内移动的黑色小圆圈。大圆圈不应该移动。此外，小圆圈必须只响应大圆圈内的触摸。不幸的是，我仍然被困在这里。似乎大圈子也在回应这些触摸。

4

1 回答 1

0

您是否正确管理事件对象？

似乎您需要在事件处理程序中添加下一行

event => { // imagine this is your event handler function
event.stopPropagation(); // it goings to avoid executes the event to parents element.
const target = event.currentTarget; // here you will be sure you're getting the correct element

}
于 2021-09-01T09:50:54.653 回答