单击更改 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;