更改陣列onPress React原始圖像

我無法弄清楚如何使用React Native更改圖像。我基本上有一系列圖像，當用戶按下圖像時，我想逐個顯示/更改圖像。這是到目前爲止我的代碼：更改陣列onPress React原始圖像

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'), 
}

這是我的組件

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

截至目前，當我點擊圖片，那就只下一個圖像陣列上，並沒有按」繼續。我也不太清楚如何編碼我所知道的，如

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

在我的React Native onMoodClick（）方法中。

感謝您的幫助提前

來源

2017-03-08 Rachel

你總是初始化的您的變量i值在onMoodClick()。檢查方法onMoodClick()的第1行。這就是爲什麼你總是選擇1的索引值，因爲在＃2線你使用i++增加值i。

使用states它保存了以前的值，並在用戶點擊不同的心情時更改該值的變量state。它會工作。

來源

2017-03-08 05:06:48

使i全球。

var i = 0; 

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

來源

2017-03-08 05:21:47 vinayr

更改陣列onPress React原始圖像

回答

相關問題