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
            },
        });

これは render メソッドでどのように見えるか、

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