react-native – 如何从React Native可触摸事件currentTarget中读取道具？

2023年12月25日 318次阅读

我有以下React Native代码,当用户点击图像时,它运行press()方法.我想从事件对象中获取itemIndex prop.我在press方法中设置了一个断点,并在Watch中添加了一些表达式.从Watch中我确定事件的目标(事件发起)是正确的图像. itemIndex prop也可用.正在处理的元素是currentTarget,Watch看到它是一个“RCTView”,我期待一个TouchableOpacity,所以也许在TouchableOpacity下面是一个View？ currentTarget itemIndex prop是未定义的,为什么？如何从currentTarget获取道具？

我想这样做以避免为每个呈现的项创建添加方法.

仅供参考,
ref = {(c)=> this._input = c}将无效,因为它是在循环中运行的.
onPress = {(e)=> this.press(e,i)}创建了一个我试图避免的新函数.

看

> target._currentElement.props.itemIndex：2
> target._currentElement.type.displayName：“RCTImageView”
> currentTarget._currentElement.props.itemIndex：undefined
> currentTarget._currentElement.type.displayName：“RCTView”

press: function(event){
    var currentTarget = ReactNativeComponentTree.getInstanceFromNode(event.currentTarget);
    var target = ReactNativeComponentTree.getInstanceFromNode(event.target);
    var currentTargetIndex = currentTarget._currentElement.props.itemIndex;
    var targetIndex = target._currentElement.props.itemIndex;
    var url = this.state.data.items[currentTargetIndex].url;
    Linking.openURL(url).catch(err => console.error('An error occurred', err));
},

render: function() {
return (
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.galleryView}>
        {
            this.state.data.items.map((data, i) =>
                <TouchableOpacity itemIndex={i} key={i} activeOpacity={0.5} onPress={this.press} >
                    <Image itemIndex={i} key={i} source={{uri:data.previewImageUri}} style={styles.galleryImage} />
                </TouchableOpacity>
            )
        }
    </ScrollView>
);
}

最佳答案 我最近遇到过同样的问题,我发现了两种不同的方法.更简单的方法是改变你的onPress将索引传递给你的按键功能,这是第二种方式：

press: function(event, index){
  var url = this.state.data.items[index].url;
  Linking.openURL(url).catch(err => console.error('An error occurred', err));
},

render: function() {
  return (
    <ScrollView
      horizontal={true}
      showsHorizontalScrollIndicator={false}
      style={styles.galleryView}
    >
    {
      this.state.data.items.map((data, i) =>
        <Images data={data} key={i} index={i} press={this.press} />
      )
    }
    </ScrollView>
    );
}

const Images = (props) => {
  const imageClicked = (e) => {
    props.press(e, props.index);
  }
  return (
    <TouchableOpacity activeOpacity={0.5} onPress={imageClicked} >
      <Image source={{uri:props.data.previewImageUri}} style={styles.galleryImage} />
    </TouchableOpacity>
  )
}
点赞