如何从 React Native 可触摸事件 currentTarget 读取道具? [英] How to read props from a React Native touchable event currentTarget?

问题描述

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

I have the following React Native code that runs the press() method when a user taps an image. I want to get the itemIndex prop from the event object. I set a break point in the press method and added some expressions to the Watch. From the Watch I determined that the target (event origination) from the event is the Image which is correct. The itemIndex prop is also available. The element being processed is the currentTarget, the Watch sees it's a "RCTView" and I was expecting a TouchableOpacity, so maybe underneath TouchableOpacity is a View? The currentTarget itemIndex prop is undefined, why? How can I get the props from the currentTarget?

我想这样做是为了避免为每个渲染的项目创建添加方法.

I want to do it this way to avoid creating addition methods for each rendered item.

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

FYI, ref={(c) => this._input = c} will not work because it's being run in a loop. onPress={(e) => this.press(e, i)} creates a new function which I'm trying to avoid.

观看

1. target._currentElement.props.itemIndex: 2
2. target._currentElement.type.displayName: "RCTImageView"
3. currentTarget._currentElement.props.itemIndex:未定义

4. currentTarget._currentElement.type.displayName:RCTView"

1. target._currentElement.props.itemIndex: 2
2. target._currentElement.type.displayName: "RCTImageView"
3. currentTarget._currentElement.props.itemIndex: undefined

4. 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 以将索引传递给您的新闻功能，这是第二种方法:

I actually came across this same issue recently, I found two different ways you could approach this. The easier way of doing it is altering your onPress to pass an index to your press function, this is the 2nd way of doing it:

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

这篇关于如何从 React Native 可触摸事件 currentTarget 读取道具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！