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

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> 

状态变化预期（某些控制台日志verifed），但不知何故，图像不会重新渲染和改变时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，将它们加载到渲染以外的单独变量中，并在条件中使用它们应该可以工作。