TouchableHighLight on 네이티브 내지도 기능 내에서

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))으로 변경해야합니다. bind(this)을 사용하여 기억하는 것이 더 좋습니다. function 키워드를 사용하는 경우에도 더 좋은 옵션은 function을 사용하지 않고 ES6과 함께 제공됩니다. 마지막으로 중요한 것은 항상 읽어야합니다. docs.