Änderung reagieren Native Image-Quelle beim Klick

Question

Ich habe derzeit ein Bild in einem TouchableOpacity-Tag eingewickelt. Das Bild besteht aus einem Sound-Symbol, und wenn der Benutzer darauf klickt, möchte ich, dass das Symbol zwischen dem "Ton ein" -Symbol und dem "Ton aus" -Symbol wechselt. Der entsprechende Code ist unten zu sehen. Ich mache mir noch keine Gedanken über den Toggle-Teil davon, ich würde nur gerne das Bild wechseln können, wenn ich darauf tippe.

Simplified Code ist unten:

const soundImg = require('../images/sound.png'); 
const muteImg = require('../images/sound-mute.png'); 

class HomeScreen extends Component { 
    static navigationOptions = { 
    header: null, 
    }; 
    render(){ 
    let imageXml = <Image 
     style={ homeStyles.optionsImage } 
     source={ gearImg } 
    />; 
    return (
     <View style={ commonStyles.container }> 
     <View style={ commonStyles.footer }> 
      <TouchableOpacity 
      style={ homeStyles.soundButton } 
      onPress={() => imageXml.source = { muteImg } }> 
      { imageXml } 
      </TouchableOpacity> 
     </View> 
     </View> 
    ); 
    } 
} 

Answer 1

Tag JSX Syntax ist, so dass Sie nicht ihr Eigentum durch bearbeiten können (dot) Syntax.. Folgendes ist der richtige Weg, dies zu tun.

const soundImg = require('../images/sound.png'); 
const muteImg = require('../images/sound-mute.png'); 

class HomeScreen extends Component { 
    constructor() { 
    super(); 
    this.state = { showSoundImg: true }; 
    } 
    static navigationOptions = { 
    header: null, 
    }; 
    renderImage() = { 
    var imgSource = this.state.showSoundImg? soundImg : muteImg; 
    return (
     <Image 
     style={ homeStyles.optionsImage } 
     source={ imgSource } 
     /> 
    ); 
    } 
    render(){ 
    return (
     <View style={ commonStyles.container }> 
     <View style={ commonStyles.footer }> 
      <TouchableOpacity 
      style={ homeStyles.soundButton } 
      onPress={() => this.setState({ showSoundImg: !this.state.showSoundImg }) } 
      /> 
      {thi.renderImage()} 
      </TouchableOpacity> 
     </View> 
     </View> 
    ); 
    } 
}