点击更改React Native图像源

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

- OstrichGlue

---

将图像源存储在状态中，并在按钮按下时使用setState()设置新的图像源。这将重新渲染组件，您可以从状态中设置新的图像。 - Ankit Aggarwal

Answer 1

标签是JSX语法，因此您不能使用.(点)语法编辑其属性。以下是正确的方法。

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

- Raj Suvariya

---

谢谢！工作完美。我对React还很新，但这让我感觉更有意义了。 - OstrichGlue

糟糕，这个解决方案看起来很棒，但我无法在Viro Media（AR / VR平台）上使其工作。在ViroCamera中使用TouchableWithoutFeedback或带有PanResponder的View会引发异常“在执行UI块时抛出异常”。不过解决方案还是很好的！ - Stephen Tetreault

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

}

- Manish Ahire

---

如果我们有多个选项卡，比如选项卡栏，这个解决方案会如何工作？对此有什么建议吗？https://stackoverflow.com/questions/54474473/not-able-to-set-active-and-inactive-images-in-react-native#54475271 - Anilkumar iOS - ReactNative

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;

- Artur Musin