react-native-android - touchableopacity - react native swipe

Reacciona nativo onPress siendo llamado automáticamente

Question

Estoy teniendo problemas con la función nativa onPress de reacción. El onPress solo debería funcionar cuando en realidad ha sido activado por un evento táctil (supongo), es decir, cuando presiono el botón en la pantalla. Pero parece que el onPress se activa cuando se llama a la función de render. Cuando intento presionar manualmente, no funciona.

 import React, { Component } from ''react'';
import { PropTypes, Text, View ,Alert } from ''react-native'';
import { Button } from ''react-native-material-design'';
export default class Home extends Component {
render() {
return (
<View style={{flex:1}}>
<Button value="Contacts" raised={true} onPress={this.handleRoute(''x'')} />
<Button value="Contacts" raised={true} onPress={this.handleRoute(''y'')} />
<Button value="Contacts" raised={true} onPress={this.handleRoute(''z'')} />
</View>
);
}
handleRoute(route){
alert(route) // >> x , y, z
}
}
module.exports = Home;

Qué me estoy perdiendo ? ¿Hay algún problema con la forma en que he asignado o esto es un error? Cualquier sugerencia es muy apreciada.

Video

Answer 1

Puedes cambiar a esto:

onPress={this.handleRoute.bind(this, ''x'')}

o esto:

onPress={() => this.handleRoute(''x'')}

La razón es que onPress toma una función como un argumento. En su código, está llamando a la función y devolviendo el resultado inmediatamente (cuando se llama el renderizado) en lugar de hacer referencia a la función para que React llame más tarde en el evento de la prensa.

La razón por la que necesita el enlace (esto) es porque la función pierde su instancia enlazada cuando simplemente lo hace (this.handleRoute) y tiene que decirle cuál usar. La función de vinculación toma los otros argumentos para llamar a la función más adelante. Consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind para obtener información más descriptiva sobre el enlace.

Hay otra forma en la que puedes enlazar en el constructor . Puede leer sobre maneras de manejar esto en Reaccionar aquí: https://facebook.github.io/react/docs/handling-events.html

Answer 2

Trata de cambiar

onPress = {this.handleRoute (''x'')} // en este caso, se llama a la función handleRoute tan pronto como ocurre la representación

a

onPress = {() => this.handleRoute.bind (''x'')} // en este caso, handleRoute no llama tan pronto como ocurre el render