Как я могу получить реальный elment с помощью node id? реагировать родной

Ответ 1

Код для его изменения недавно изменился, когда React/React Native common code был перемещен, но я бы предложил проверить Inspector code и доступные методы на ReactNativeComponentTree

Более конкретно, следующий код должен сделать трюк для вас:

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

Ответ 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>
  )
};

Ответ 3

В ответе native v.0.51 вам нужно это утверждение:

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

и ._currentElement.props изменено на .memoizedProps

Ответ 4

В ответе native v.0.42 вам нужно это утверждение:

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

Ответ 5

В случае, если кто-то споткнется по этому вопросу, ReactNativeComponentTree был удален из версии 0.56 или около того.

Тем не менее, я нашел гораздо более чистый способ обнаружения касания определенного (sub-) элемента:

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 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.

Затем мы сравниваем этот идентификатор узла с идентификатором узла nativeEvent.target, чтобы проверить, был ли задействован элемент sub-.

В приведенном выше примере только второй узел <Text> выдает выходные данные.

Ответ 6

Еще один способ решить эту проблему - использовать ссылку (вместе с createRef), например, так:

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

Еще одним преимуществом этого является то, что ссылка может быть действительно чем угодно, не обязательно должна быть затронутым узлом.