Estoy tratando de crear un componente React que alterna un logotipo entre blanco y negro cuando se presiona. Quiero incorporar más funciones en el componente en el futuro, pero changeLogo() console.log ni siquiera se mostrará en el depurador.
¡Cualquier ayuda/consejo apreciada!
reaccionar nativo: 0.39.2 reaccionar: ^ 15.4.2
import React, { Component } from 'react'; import { View, Image } from 'react-native'; export default class TestButton extends Component { constructor(props) { super(props); this.state = { uri: require('./icons/logo_white.png') } } changeLogo() { console.log('state changed!'); this.setState({ uri: require('./icons/logo_black.png') }); } render() { return ( <View style={styles.container} > <Image source={this.state.uri} style={styles.logoStyle} onPress={this.changeLogo} /> </View> ); } } const styles = { container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'blue', }, logoStyle: { width: 200, height: 200, marginLeft: 10, marginRight: 5, alignSelf: 'center', }, };onPress prop no está disponible para el componente Imagen . Debe envolverlo con el componente TouchableHighlight de esta manera:
import { View, Image, TouchableHighlight } from 'react-native'; ... <TouchableHighlight onPress={() => this.changeLogo()}> <Image source={this.state.uri} style={styles.logoStyle} /> </TouchableHighlight>