web-dev-qa-db-ja.com

タッチ可能なコンポーネントで子要素のタッチを無効にする方法

次のコードがあります

<BlurView blurType={'light'} blurAmount={10} style={{flex: 1}}>
    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.setState({displayVideoModal: false})}>
        <View style={{width: moderateScale(300), height: moderateScale(300), backgroundColor: '#333333', borderRadius: moderateScale(24)}}>

        </View>
    </TouchableOpacity>
</BlurView>

次の結果

enter image description here

フルブラービューの画面をタッチイベントに応答させて非表示にしたいので、BlurView領域をカバーするTouchableOpacityがあります。中央の景色を除いて。これには動画が含まれ、その親コン​​ポーネントのタッチイベントを受信して​​はならず、独自のタッチイベントを持っている必要があります。

どうすればよいですか？または、同様の結果を達成するための代替策があるかどうかを知りたいと思っています。

react-nativetouchableopacity
6
Ibrahim Azhar Armar

pointerEvents を活用できます：

<BlurView blurType={'light'} blurAmount={10} style={{flex: 1}}>
    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.setState({displayVideoModal: false})}>
        <View pointerEvents="none" style={{width: moderateScale(300), height: moderateScale(300), backgroundColor: '#333333', borderRadius: moderateScale(24)}}>
        </View>
    </TouchableOpacity>
</BlurView>
1
Umair Sarfraz

フローティングビューにボタンもあるため、ネストされたタッチャブルは機能しませんでした。背景オーバーレイビュー（この場合はBlurView）で、次の小道具を追加します。

onStartShouldSetResponder={(event) => {
    return event.nativeEvent.touches.length == 1;
}}
onResponderRelease={(event) => {
    if (event.target == event.currentTarget) {
        this.props.onCancel()
    }
}}

これは、event.currentTargetは、プロップonResponderReleaseを含むビューであり、targetは、タッチが解放されたビューです。

React Native Gesture Responder Systemのドキュメント： https://facebook.github.io/react-native/docs/gesture-responder-system

0
SamB