scope - TouchableHighLight onPress 在 react native 的 map 函数内

Question

我有一组图像，我想在 React Native 的组件中显示。
我使用 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，我有一个事件，当事件触发时我得到一个关于“this”的错误(undefined 不是一个函数)。
我知道这是一个范围问题，但我无法弄明白。
这里使用箭头函数是否正确？

Answer 1

如果您想在 map 函数中使用 this，您必须更改为箭头函数，以便 this 指向外部作用域。

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