更改阵列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原始图像

回答

相关问题