更改反應原生圖像源點擊

Question

我目前有一個圖像包裝在一個TouchableOpacity標籤內。圖像是一個聲音圖標，當用戶點擊它時，我希望圖標在「聲音開啓」圖標和「聲音關閉」圖標之間切換。相關的代碼可以在下面看到。我並不擔心它的切換部分，我只是想在點擊它時切換圖像。

簡化代碼如下：

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

標籤是JSX語法，所以你不能編輯它的屬性（點）的語法。以下是正確的方法。

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> 
    ); 
    } 
}