web-dev-qa-db-fra.com

Comment désactiver le toucher d'un élément enfant dans le composant tactile

J'ai le code suivant

<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>

Quel résultat en suivant

enter image description here

J'ai TouchableOpacity couvrant la zone BlurView parce que je veux que l'écran d'affichage flou complet réponde à l'événement tactile et le masque. sauf la vue au centre. Il contiendra la vidéo et ne doit pas recevoir l'événement tactile de son composant parent et il doit avoir son propre événement tactile.

Comment puis-je faire cela? Ou je suis prêt à savoir s'il existe des alternatives pour obtenir le même résultat.

react-nativetouchableopacity
6
Ibrahim Azhar Armar

Vous pouvez tirer parti de 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

Les touches imbriquées ne fonctionnaient pas pour moi car j'avais également des boutons dans la vue flottante. Sur la vue de superposition d'arrière-plan (BlurView dans ce cas), ajoutez les accessoires suivants:

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

Cela fonctionne parce que event.currentTarget est la vue qui a le prop onResponderRelease et target est la vue sur laquelle le toucher a été relâché.

Documentation du système React Native Gesture Responder: https://facebook.github.io/react-native/docs/gesture-responder-system

0
SamB