Question

<TouchableHighlight onPress={this._onPress.bind(this)}>
  <Text style={{color: 'white'}}>CLOSE</Text>
</TouchableHighlight>

_onPress(e) {
  console.log(e.nativeEvent.target);
}

如上所述，target只是一个名为node id的数字，但我想得到真正的元素。我怎么能这样做？

Answer 1

当React / React Native公共代码被移动时，最近更改的代码已更改，但我建议ReactNativeComponentTree上的check out Inspector code和available methods

更具体地说，以下代码应该为您解决问题：

var ReactNativeComponentTree = require('react/lib/ReactNativeComponentTree');
ReactNativeComponentTree.getInstanceFromNode(nativeTag);

Answer 2

这就是我最终为自己解决类似情况的方法。它无论如何也没有采用相同的方法，但却做到了！

onItemPressed(item) {
  this.props.navigateForward(item.sceneId);
  this.props.closeDrawer();
}

render() {
  var listItems = [];

  for (var i=0; i < this.props.navigation.scenes.length; i++) {
    var item = this.props.navigation.scenes[i];

    listItems.push(<ListItem
      onPress={this.onItemPressed.bind(this, item)}
      key={i}
      title={item.title}
      leftIcon={{name: item.icon}}
      underlayColor={colors.lightPrimary}
      containerStyle={styles.menuItemStyle}
      titleStyle={styles.menuItemTitle}
    />);
  }


  return (
    <View style={styles.container}>
      <List containerStyle={styles.listContainer}>
        {listItems}
      </List>
    </View>
  )
};

Answer 3

在本机v.0.51中，你需要这个声明：

import ReactNativeComponentTree from 'react-native/Libraries/Renderer/shims/ReactNativeComponentTree';
ReactNativeComponentTree.getInstanceFromNode(e.target);

且._currentElement.props已更改为.memoizedProps

Answer 4

在本机v.0.42中，你需要这个声明：

import ReactNativeComponentTree from 'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree';
ReactNativeComponentTree.getInstanceFromNode(e.target)._currentElement;

Answer 5

万一有人偶然发现了这个问题，ReactNativeComponentTree已从0.56左右的版本中删除。

但是，我发现了一种更干净的方法来检测某个（子）元素上的轻敲：

import React from 'React';
import {
  Text,
  TouchableOpacity,
  View,

  findNodeHandle
} from 'react-native';

class TestClass extends React.Component {
  onTap = (evt) => {
    // Retrieve the handle of the second <Text> node
    let elementHandle = findNodeHandle(this.refs["element"]);

    // Check if the tapped element's node-id equals the retrieved one 
    if (evt.nativeEvent.target == elementHandle) {
      // Do something when element was clicked
      console.log("Second <Text> node was tapped")
    }
  }

  render() {
    return (
      <TouchableOpacity onPress={this.onTap}>
        <View>
          <Text>Hi there!</Text>
          <Text ref="element">Only detect this element</Text>
        </View>
      </TouchableOpacity>
    );
  }
};

基本上，我们只是使用引用（ref）来使用findNodeHandle访问元素的节点ID。

然后我们将该节点ID与nativeEvent.target节点ID进行比较，以检查是否使用了子元素。

在上面的示例中，只有第二个<Text>节点产生输出。

Answer 6

解决问题的另一种方法是使用ref（与createRef一起），如下所示：

  const touchableRef = React.createRef();
  return (
    <TouchableWithoutFeedback
      ref={touchableRef}
      onPress={() => /* use touchableRef.current */ undefined}
    />
  );

这样做的另一个好处是，引用实际上可以是任何东西，而不必是被触摸的节点。

Answer 7

关注点是性能，所以我用这种方法解决了

只需围绕TouchableOpacity或任何可点击的视图创建包装器

import { TouchableOpacity } from "react-native"

export const TouchableOpacityOnPressOptimized = ({ children, onPress, index }) => {
  return (
    <TouchableOpacity onPress={() => onPress(index)}>
      {children}
    </TouchableOpacity>
  )
}

const touchMe = (index) => {
    switch(index) {
       case 1: alert('index is' + index)
       case 2: alert('index is' + index)
    }
}

<TouchableOpacityOnPressOptimized index={1} onPress={touchMe}> touch me 1 </TouchableOpacityOnPressOptimized>

<TouchableOpacityOnPressOptimized index={2} onPress={touchMe}> touch me 2 </TouchableOpacityOnPressOptimized>

<TouchableOpacityOnPressOptimized index={3} onPress={touchMe}> touch me 3 </TouchableOpacityOnPressOptimized>

这样您的可触摸组件就不会重新渲染

如何通过节点ID获得真正的元素？反应母语

7 个答案: