Change Image von Array onPress Reagieren Native

Question

Ich habe Probleme herauszufinden, wie das Bild beim Drücken mit React Native ändern. Ich habe im Grunde eine Reihe von Bildern, die ich einzeln anzeigen/ändern möchte, während der Benutzer auf das Bild drückt. mein Code hier so weit:

var MOOD_LIST = ["sunny", "cloudy", "thunderstorm", "warm", "suncloudy"]; 

var MOODS = { 
    "warm":   require('../design/warm.png'), 
    "sunny":  require('../design/sunny.png'), 
    "cloudy":  require('../design/cloudy.png'), 
    "suncloudy": require('../design/suncloudy.png'), 
    "thunderstorm": require('../design/thunderstorm.png'), 
} 

Das ist meine Komponente ist

class Home extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     mood: "sunny", 
    }; 
} 

    onMoodClick() { 
    var i = 0; 
    i++; 
    var mood = MOOD_LIST[i]; 
    this.setState ({mood: mood}); 
    } 

    getMoodImage(moodName) { 
    return MOODS[moodName]; 
    } 


    render() { 
    return(
     <TouchableWithoutFeedback onPress = {() => this.onMoodClick()}> 
       <Image source = {this.getMoodImage(this.state.mood)} style = {[styles.center, styles.MoodTodayImage]}/> 
      </TouchableWithoutFeedback> 
    ); 
    } 
    } 

Ab zur Zeit, als ich auf dem Bild klicken, es geht nur um das nächste Bild auf dem Array und doesn‘ t fahre fort. Ich bin auch nicht sicher, wie man Code, was ich weiß, wie

for (var i = 0; i < mood.length; i++) 

in meinem Reagieren Mutter onMoodClick() -Methode.

Vielen Dank für Hilfe im Voraus

Answer 1

Du immer den Wert Ihrer Variable i in onMoodClick() initialisiert. Überprüfen Sie die Zeile 1 Ihrer Methode onMoodClick(). Deshalb nehmen Sie immer den Indexwert 1 auf, da Sie in Zeile 2 den Wert i mit i++ erhöhen.

Verwenden Sie states, die den vorherigen Wert enthält, und ändern Sie den Wert dieser state Variable, wenn der Benutzer auf die andere Stimmung klickt. Es wird klappen.

Answer 2

Marke i global.

var i = 0; 

class Home extends Component { 
    .... 
    onMoodClick() { 
    i = i === 4 ? 0 : i + 1 ; 
    var mood = MOOD_LIST[i]; 
    this.setState ({mood: mood}); 
    } 
    .... 
}