如何从 React Native 可触摸事件 currentTarget 读取 props？

Question

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

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

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

手表

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

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

Answer 1

实际上我最近也遇到了同样的问题，我发现了两种不同的方法可以解决这个问题。更简单的方法是改变您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>
  )
}