TouchableHighLight onPress内のマップ内の機能ネイティブ

Question

私は反応ネイティブでコンポーネントに表示したい画像の配列を持っています。
map関数を使って配列を繰り返し処理します。私はまた、画像の上に削除ボタンがあります。
関連するコードは次のとおりです。

 this.state.imgs.map(function(img,i){ 
     return (
      <View style={{alignItems:'center',justifyContent:'center', height:75, width:75, borderRadius:25}}> 
      <Image style={{position:'absolute',resizeMode:'cover', top:0,left:0, borderRadius:38,height:75, width:75, opacity:0.5}} source={{uri: img.path }} /> 
      <TouchableHighlight onPress={() => this.removeItem(i)}> 
       <Image style={{}} source={require('./Images/images_asset65.png')} /> 
      </TouchableHighlight> 
      </View> 
     ); 
     }) 

問題は、私はイベントを持ってTouchableHighlight、ある、イベントが発生しますが、私は「これを」に関するエラーを取得するときに（未定義の関数ではありません）。
これは範囲の問題ですが、私はそれを理解できません。
矢印機能の使用はここでは正しいですか？

Answer 1

マップ機能内でthisを使用する場合は、矢印機能に変更する必要があります。thisは外側の範囲を指します。あなたのコードでfunctionキーワードを使用する場合

this.state.imgs.map((img, i) => { 
    return (
     <View style={{alignItems:'center',justifyContent:'center', height:75, width:75, borderRadius:25}}> 
     <Image style={{position:'absolute',resizeMode:'cover', top:0,left:0, borderRadius:38,height:75, width:75, opacity:0.5}} source={{uri: img.path }} /> 
     <TouchableHighlight onPress={() => this.removeItem(i)}> 
      <Image style={{}} source={require('./Images/images_asset65.png')} /> 
     </TouchableHighlight> 
     </View> 
    ); 
    }) 

Answer 2

は、あなたは、コンテキストを失い、functionは、独自に作成します。 functionを使用する場合は、これらの関数が同じコンテキストを共有するように、これらの関数をbind(this)でバインドすることを忘れない方が良いでしょう。したがって、関連するコードでは、最後の行を}.bind(this))に変更する必要があります。 functionキーワードを使用すると、を何らかの形で使用して覚えておくことをお勧めします。より良いオプションでもfunctionを使用していない場合は、ES6が付いてきます。最後は重要なことですが、常に読むべきです。docs.