react native - touchablewithoutfeedback - Reaccionar nativo: Ver onPress no funciona

touchableopacity image react native

Question

Estoy enfrentando un problema extraño. En mi aplicación nativa Reaccionar, si configuro el evento onPress para View no se activa, pero si configuro lo mismo para Text dentro de View , se dispara. ¿Que me estoy perdiendo aqui?

<View style={{backgroundColor: "red", padding: 20}}>
  <Text onPress={()=> {
    console.log(''works'');
    }
  }>X</Text>
</View>


<View style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log(''does not work'');
    }
  }>
  <Text>X</Text>
</View>

¿Por qué esto es tan? ¿Es este un problema con React Native? Estoy usando la versión 0.43

Answer 1

Puede ajustar la vista con un TouchableWithoutFeedback y luego usar onPress y amigos como de costumbre. También puede bloquear los pointerEvents de pointerEvents configurando el atributo en la vista secundaria, incluso bloquea los eventos de puntero en el TouchableWithoutFeedback padre, es interesante, esta fue mi necesidad en Android, no probé en iOS:

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

<TouchableWithoutFeedback onPressIn={this.closeDrawer}>
    <Animated.View style={[styles.drawerBackground, styleBackground]} pointerEvents={isOpen ? undefined : ''none''} />
</TouchableWithoutFeedback>

Answer 2

Puede usar TouchableOpacity para el evento onPress . View no proporciona accesorios onPress .

<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log(''does not work'');
    }
  }>
  <Text>X</Text>
</TouchableOpacity>

Answer 3

Puede usar TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, para lograr esto. Ver componente no proporciona onPress como accesorios. Entonces usas estos en lugar de eso.

<TouchableNativeFeedback
        onPress={this._onPressButton}
</TouchableNativeFeedback>

OR

<TouchableHighlight onPress={this._onPressButton}>
</TouchableHighlight>

OR

<TouchableOpacity onPress={this._onPressButton}>
</TouchableOpacity>