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

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

Answer 2

将所需信息绑定到回调并为每个孩子分配一个，避免在每次渲染孩子时重新创建回调。

class Hello extends React.Component{
  state = { names: this.props.names.map((name, i) => {
      return Object.assign({
        onClick: this._onClick.bind(this, i, this.props),
      }, name)
    }),
  };

  _onClick(ind, _props, e) {
    alert('props:' + JSON.stringify(_props));
  }

  render() {
    const { names } = this.state;
    return (
      <div>
        { names.map((name, i) => (
            <div key={i}>Name: <input value={ name.first } onClick={ name.onClick } /></div>
          ))}
      </div>
  )}
}

ReactDOM.render(
  <Hello names={[{first:'aaa'},{first:'bbb'},{first:'ccc'}]}/>,
  document.getElementById('container')
);

JS Fiddle

Answer 3

您可以使您的事件处理程序成为接受额外参数的柯里化函数。

 //Curried function for onPress event handler
  handleOnPress = (someId, someProp) => event => {
    //USE someProp ABOVE TO ACCESS PASSED PROP, WHICH WOULD BE undefined IN THIS CASE
    //Use event parameter above to access event object if you need
    console.log(someProp)

    this.setState({
      touchedId: someId
    })
  }

查看下面的工作零食

https://snack.expo.io/@prashand/accessing-props-from-react-native-touch-event