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変更変わりません。イメージへのパスも正しいです。

すべてのアイデア何が問題なのですか？

EDIT：全コンポーネント：このような

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：

私は再度レンダリングしていない画像を引き起こすもの見つけ!!!!

スタイルシートでサイズをスタイルすると、レンダリングされません。サイズスタイルがない場合はすべて問題ありません。

Answer 1

必要な呼び出しは動的ではありません。それらは静的に分析され、バンドルされます。 https://github.com/facebook/react-native/issues/2481。 Andrew Axtonが示唆しているように、レンダリング外の別の変数にそれらをロードし、条件付きで動作させる必要があります。