Question

我无法弄清楚如何使用React Native更改印刷机上的图像。我基本上有一系列图像，当用户按下图像时，我想逐一显示/更改这些图像。到目前为止，这是我的代码：

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（）方法中。

提前感谢您的帮助

Answer 1

您始终在moment(dateValue).utcOffset(-7);中初始化变量i的值。检查方法onMoodClick()的第1行。这就是为什么你总是在第2行上获取索引值1的原因，你使用onMoodClick()增加i的值。

使用包含上一个值的i++，并在用户点击不同情绪时更改该states变量的值。它会起作用。

Answer 2

让i全球化。

var i = 0;

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

更改数组的图像onPress React Native

2 个答案: