Solución:
Trata de cambiar
onPress = {this.handleRoute (‘x’)} // en este caso, se llama a la función handleRoute tan pronto como ocurre el renderizado
para
onPress = {() => this.handleRoute.bind (‘x’)} // en este caso, handleRoute no se llama tan pronto como ocurre el renderizado
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 argumento. En su código, está llamando a la función y devolviendo el resultado inmediatamente (cuando se llama a render) en lugar de referenciando la función para que React llame más tarde en el evento de 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 esta usar. La función de vinculación toma los otros argumentos para llamar a la función más tarde. Consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind para obtener más información descriptiva sobre bind.
Hay otra forma en la que puede enlazar en el constructor. Puede leer sobre formas de manejar esto en React aquí: https://facebook.github.io/react/docs/handling-events.html
Cambio
onPress={this.handleRoute('x')}
para
onPress={()=>this.handleRoute('x')}
De lo contrario, la función se invoca tan pronto como se llama al método render.