アレイの画像を交換するネイティブ応答

Question

React Nativeを使用してプレス上で画像を変更する方法を理解するのに問題があります。私は基本的に画像の配列を持っていますが、ユーザーが画像を押すにつれて、一つずつ表示/変更したいのです。 がここにこれまでの私のコードです：私は、画像をクリックしたとき、これは私のコンポーネント現在のよう

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

ある

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

、それが唯一の「アレイ上の次の画像へ移り、doesnの続行する。私はまた、このような私のネイティブonMoodClickに反応（）メソッドで

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

として、私が知っているコーディング方法をあまりにもわかりません。

は、あなたが常にonMoodClick()であなたの変数iの値を初期化され、事前

Answer 1

で助けてくれてありがとう。あなたのメソッドonMoodClick()の1行目をチェックしてください。だからこそ、あなたはいつも＃2の行にi++を使ってiの値をインクリメントするので、インデックス値1を選んでいるのです。

以前の値を保持しているstatesを使用して、ユーザーが別の気分をクリックしたときにその値stateを変更します。それが動作します。

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