單擊更改 React Native Image 源

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

Tag 是 JSX 語法，因此您不能通過 .(dot) 語法編輯其屬性。 以下是正確的做法。

import soundImg from '../images/sound.png';
import muteImg from '../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 }) } 
          />
            {this.renderImage()}
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

Answer 2

我正在使用以下方式並且它工作正常。

class HomeScreen extends Component {
  static navigationOptions = {
    header: null,
};

constructor() {
    super();

    this.state = {
      flagImage:true
    };
}

render(){
    let imageXml = <Image
      style={ homeStyles.optionsImage }
      source={ gearImg }
    />;
    return (
      <View style={ commonStyles.container }>
        <View style={ commonStyles.footer }>
          <TouchableOpacity
            style={ homeStyles.soundButton }
            onPress={ this.changeImage }>

          <Image source={ this.state.flagImage === true ?                  
                          require('../images/sound.png') : 
                          require('../images/sound-mute.png')}
           />

          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

changeImage() {

   this.setState({
      flagImage:!this.state.flagImage
    });

}

Answer 3

這就是我使用組件功能實現切換控制的方式。

import React, { useState } from 'react';
import { View, Image, StyleSheet, Pressable, Text, Switch } from 'react-native';

import images from '../assets/images';


function ToggleControl(props) {
    
    let [flag, setFlag] = React.useState(true);
    let toggleSwitch = () => setFlag(previousState => !previousState);
    
    let imageUri = flag ? images.toggleOn : images.toggleOff;

    return (
        <Pressable onPress={ () => toggleSwitch() } >
            <Image source={{ uri: imageUri }} style={{width: 44, height: 20}}  />
        </Pressable>
    );
}

export default ToggleControl;