相关疑难解决方法(0)

我有以下 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} …

   Run Code Online (Sandbox Code Playgroud)

我在 React 上创建了一个游戏，我正在尝试将我的代码调整为 React Native。困扰我的一件事是如何翻译这三行，因为在 RN 中没有可依赖的 DOM 解决方案：

handleClick(e) {

this.props.change(e.currentTarget.id);

}  

这里发生的事情是一个无状态的孩子正在收集一个被点击的元素 id（currentTarget 的），并使用它来调用在父元素中定义的方法。e.currentTarget.id然而，这种公式在 RN 中不起作用。

有没有一种雄辩的方法可以在 RN 中重写这一行？

注意：这里和这里有两个与此类似的问题，但答案看起来更像是补丁而不是结构优雅的解决方案。如果您知道某些事情，请发布答案。

编辑：似乎不能绕过 ReactNativeComponentTree。

到目前为止，我有这么多，但这还不起作用：

handlePress(event) {

let number =  ReactNativeComponentTree.getInstanceFromNode(event.currentTarget)._currentElement.id;

this.props.change(number);

}  

第二次编辑：好吧，也许我应该添加一个我想要实现的简单示例。当我点击任何平面列表的元素时，它的 id 应该显示在 Child 的底部。单击重置将恢复默认状态。

下面的简单示例代码：

    import React, { Component } from 'react';
    import { AppRegistry, FlatList, StyleSheet, Text, View, Button } from 'react-native';
    import ReactNativeComponentTree from 'react-native';

    export default class Parent extends Component {

      constructor(props) {
        super(props);    

        this.state …