2016-05-30 6 views
1

Ich habe ein Symbol als Bild und ich möchte das Symbol ändern, wenn sich eine Zustandseigenschaft ändert. Hier ist der relevante Code:reactive-native: Bild wird nicht neu gerendert, wenn sich der Status ändert

<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> 

Die Zustandsänderungen korrekt wie erwartet (verifed von einigen Konsolenprotokollen), aber irgendwie das Bild nicht wieder machen und ändern, wenn this.state.started Änderungen. Der Pfad zu den Bildern ist ebenfalls korrekt.

Irgendwelche Ideen, was ist das Problem?

EDIT: Die gesamte Komponente:

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

so etwas wie das funktioniert einfach:

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

EDIT2:

Ich fand, was das Bild nicht rerender verursacht !!!!

Wenn ich die Größe im StyleSheet style, wird es nicht neu rendern ... Wenn es keinen Größenstil hat, ist alles in Ordnung!

+0

Ist Ihre '_handleStartPress' Methode an' this' gebunden? – Cherniv

+0

Ja, der Status ändert sich (ich kann es auf die Konsole nach dem Ändern drucken) – rasmus1610

+0

Ich denke, ich hatte dieses Problem auch, sah auf meinen Code Ich nahm die Logik außerhalb des Rendering und nur eine Variable statt. –

Antwort

Verwandte Themen