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，將它們加載到渲染以外的單獨變量中，並在條件中使用它們應該可以工作。