Détecter le tap sur l'extérieur de la vue en réagissant natif

Question

Comment détecter le tap sur l'extérieur de la vue (La vue est une petite largeur et la hauteur sont 200). Par exemple, j'ai une vue personnalisée (qui est comme un modal) et sa visibilité est contrôlée par l'état. Mais en cliquant en dehors de rien rien n'est changé car il n'y a pas de setState fait pour cela, j'ai besoin d'attraper les utilisateurs tapent partout sauf dans le modal. Comment est-ce possible dans React Native?

Answer 1

utilisez un TouchableOpacity autour de votre modal et vérifiez qu'il est onPress. Regardez cet exemple.

const { opacity, open, scale, children,offset } = this.state; 
let containerStyles = [ styles.absolute, styles.container, this.props.containerStyle ]; 
let backStyle= { flex: 1, opacity, backgroundColor: this.props.overlayBackground }; 

<View 
    pointerEvents={open ? 'auto' : 'none'} 
    style={containerStyles}> 
    <TouchableOpacity 
     style={styles.absolute} 
     disabled={!this.props.closeOnTouchOutside} 
     onPress={this.close.bind(this)} 
     activeOpacity={0.75}> 
     <Animated.View style={backStyle}/> 
    </TouchableOpacity> 
    <Animated.View> 
     {children} 
    </Animated.View> 
    </View> 

const styles = StyleSheet.create({ 
    absolute: { 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    backgroundColor: 'transparent' 
    }, 
    container: { 
    justifyContent: 'center', 
    elevation: 10, 
    } 
});