如何通过节点id获取真实的元素?React原生的

bmvo0sr5  于 2023-08-07  发布在  React
关注(0)|答案(8)|浏览(124)
<TouchableHighlight onPress={this._onPress.bind(this)}>
  <Text style={{color: 'white'}}>CLOSE</Text>
</TouchableHighlight>

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

字符串
如上所述,target只是一个称为节点id的数字,但我想得到真实的的元素。我怎么能这么做呢?

8dtrkrch

8dtrkrch1#

最近,当React / React Native通用代码被移动时,代码发生了变化,但我建议在ReactNativeComponentTree上使用check out Inspector codeavailable methods
更具体地说,下面的代码应该为您做的伎俩:

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

字符串

pjngdqdw

pjngdqdw2#

这就是我如何解决类似的情况。它不以任何方式遵循相同的方法,但它的伎俩!

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

字符串

dpiehjr4

dpiehjr43#

如果有人在这个问题上绊倒了,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的元素的node-id。
然后,我们将该节点ID与nativeEvent.target节点ID进行比较,以检查是否有子元素被分接。
在上面的示例中,只有第二个<Text>节点产生输出。

3npbholx

3npbholx4#

在react native v.0.51中,您需要以下语句:

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

字符串
._currentElement.props变更为.memoizedProps

q3aa0525

q3aa05255#

在react native v.0.42中,您需要以下语句:

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

字符串

gv8xihay

gv8xihay6#

解决问题的另一种方法是使用ref(与createRef一起使用),如下所示:

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

字符串
这样做的另一个好处是,ref可以是任何东西,不必是被触摸的节点。

hujrc8aj

hujrc8aj7#

关注点是性能,所以我用这种方法解决了它
只需围绕TouchableOpacity或任何可单击视图创建一个 Package 器

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>

字符串
这样你的可触摸组件就不会重新渲染

sqyvllje

sqyvllje8#

React Native文档:* “一旦我们准备好推出React 18,findNodeHandle将不兼容。React Native中findNodeHandle的弃用类似于React DOM中findDOMNode的弃用。
我很想找到一种更好的方法来获取组件,例如,当从press touch接收本机事件时。
我希望只有一个事件处理方法,让它决定哪个组件触发了事件…但不太喜欢传递arrow function或像proposed alternatives in the No longer expose ReactNativeComponentTree pull请求那样使用bind。

相关问题