React Native: View onPress no funciona

104

Me enfrento a un problema extraño. En mi aplicación reaccionar nativa, si configuro el onPressevento View, no se activa, pero si configuro lo mismo en el Textinterior View, se activa . ¿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 esto un problema con React Native? Estoy usando la versión 0.43

react-native react-native-android

— mehulmpt
fuente

176

Puede utilizar TouchableOpacitypara onPresseventos. Viewno proporciona onPressapoyo.

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

— Ahsan Ali
fuente

4

La documentación de referencia completa está aquí: facebook.github.io/react-native/docs/touchableopacity.html

— Muhammad Hannan

¿Puede onPress trabajar con una función asíncrona como devolución de llamada? No veo mención de esto en la documentación oficial.

— ryanwebjackson

27

Puede envolver la vista con un TouchableWithoutFeedbacky luego usar onPressy amigos como de costumbre. Además, aún puede bloquear pointerEventsconfigurando el atributo en la vista secundaria, incluso bloquea los eventos de puntero en la vista principal TouchableWithoutFeedback, es interesante, esta era 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>

— Noitidart
fuente

2

Probado en iOS y funciona bien. Ambos con toque sin retroalimentación y resaltado táctil

— habido el

¡Gracias por compartir @habed! ¿El pointerEventsNonebloque del niño presiona al padre envolvente?

— Noitidart

6

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

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

OR

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

OR

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

Expandir fragmento

— Naleen Dissanayake
fuente

2

Alternativamente, también puede proporcionar onStartShouldSetResponder a su vista, así:

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>

— Sydney C.
fuente