Question

我有一个图标作为图像，我想在状态属性更改时更改图标。以下是相关代码：

<TouchableHighlight underlayColor="rgba(0,0,0,0)" style={styles.playButton} onPress={this._handleStartPress}>
     <Image source={(this.state.started) ? require('./Control-pause.png') : require('./Control-play.png')} resizeMode="contain" style={styles.icon}/>
</TouchableHighlight>

状态按预期正确更改（由某些控制台日志验证），但不知何故，当this.state.started更改时，图像不会呈现和更改。图像的路径也是正确的。

任何想法是什么问题？

编辑：整个组成部分：

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  ScrollView,
  Vibration,
  AlertIOS,
  Image
} from 'react-native'

/*import Icon from 'react-native-vector-icons/FontAwesome';*/
const timer = require('react-native-timer'); 

const Button = require('./components/Button.js');
const PlayIcon = require('./Control-play.png');
const PauseIcon = require('./Control-pause.png');

class Project extends Component {
  constructor(props) {
    super(props);
    this.state = {
      timerValue: 25*60,
      count: 0,
      started: false,
    };
    this._tick = this._tick.bind(this);
    this._runClock = this._runClock.bind(this);
    this._stopClock = this._stopClock.bind(this);
    this._handlePomodoroPress = this._handlePomodoroPress.bind(this);
    this._handlePausePress = this._handlePausePress.bind(this);
    this._getMinsSecs = this._getMinsSecs.bind(this);
    this._finishedTimer = this._finishedTimer.bind(this);
    this._handleStartPress = this._handleStartPress.bind(this);
  }

  _tick() {
    if (this.state.timerValue > 0) {
     this.setState({timerValue: this.state.timerValue - 1});      
    } else {
      this._finishedTimer();
    }
  }

  _finishedTimer() {
      this.setState({started: false});
      timer.clearInterval('timer');
      Vibration.vibrate();
      AlertIOS.alert("Time's up!");

  }

  _runClock() {
    this.setState({started: true});
    console.log("running: ", this.state.started);
    timer.setInterval('timer', this._tick, 1000);    
  }

  _stopClock() {
    this.setState({started: false});
    console.log("running: ", this.state.started);
    timer.clearInterval('timer');
  }

  _getMinsSecs(seconds) {
    let mins = Math.floor(seconds / 60);
    let secs = seconds - mins * 60;
    return  (mins < 10 ? "0" : "") + mins + ":" + (secs <10 ? "0" : "") + secs;
  }

  _handleStartPress() {
    if (!this.state.started) {
      this._runClock();
    } else {
      this._stopClock();
    }
  }

  _handlePomodoroPress() {
    if (!this.state.started) {
      this.setState({timerValue: 25*60});
    }
  }

  _handlePausePress() {
    if(!this.state.started) {
      this.setState({ timerValue: 5*60 }); 
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.timeWrapper}>
          <View style={styles.line}/>
          <Text style={styles.time}>{this._getMinsSecs(this.state.timerValue)}</Text>
          <View style={styles.line}/>
        </View>

        <TouchableHighlight underlayColor="rgba(0,0,0,0)" style={styles.playButton} onPress={this._handleStartPress}>
         <Image source={(this.state.started) ? require('./Control-pause.png') : require('./Control-play.png')} resizeMode="contain" style={styles.icon}/>
        </TouchableHighlight>
        <View style={styles.buttonWrapper}>
          <Button 
            value="Pomodoro"
            onPress={this._handlePomodoroPress}/>
          <Button value="Pause" onPress={this._handlePausePress}/>        
        </View>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: 'center',
    backgroundColor: "#7CCF9E"
  },
  time: {
    fontSize: 74,
    color: '#fff',
    fontWeight: '200'
  },
  buttonWrapper: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  playButton: {
    width: 79,
    height: 79,
    borderRadius: 100,
    borderWidth: 3,
    borderColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  line: {
    marginTop: 10,
    height: 3,
    width: 200,
    backgroundColor: '#fff'
  },
  timeWrapper: {
    alignItems: 'center'
  },
  icon: {
    height: 42,
  }
});

AppRegistry.registerComponent('Project', () => Project);

这样的事情很容易：

    <TouchableHighlight underlayColor="rgba(0,0,0,0)" style={styles.playButton} onPress={this._handleStartPress}>
      <Text>{this.state.started ? "started" : "stopped"}</Text>
    </TouchableHighlight>

EDIT2：

我找到了导致图片无法重新渲染的原因!!!!

当我在StyleSheet中设置样式时，它不会重新渲染...如果没有尺寸样式，一切都很好！

Answer 1

要求电话不是动态的。它们是静态分析和捆绑的。 https://github.com/facebook/react-native/issues/2481。正如Andrew Axton建议的那样，将它们加载到render之外的单独变量中，并使用条件中的变量。

react-native：当状态发生变化时，图像不会重新呈现

1 个答案: