<TouchableHighlight onPress={this._onPress.bind(this)}>
<Text style={{color: 'white'}}>CLOSE</Text>
</TouchableHighlight>
_onPress(e) {
console.log(e.nativeEvent.target);
}
字符串
如上所述,target
只是一个称为节点id的数字,但我想得到真实的的元素。我怎么能这么做呢?
<TouchableHighlight onPress={this._onPress.bind(this)}>
<Text style={{color: 'white'}}>CLOSE</Text>
</TouchableHighlight>
_onPress(e) {
console.log(e.nativeEvent.target);
}
字符串
如上所述,target
只是一个称为节点id的数字,但我想得到真实的的元素。我怎么能这么做呢?
8条答案
按热度按时间8dtrkrch1#
最近,当React / React Native通用代码被移动时,代码发生了变化,但我建议在
ReactNativeComponentTree
上使用check outInspector
code和available methods。更具体地说,下面的代码应该为您做的伎俩:
字符串
pjngdqdw2#
这就是我如何解决类似的情况。它不以任何方式遵循相同的方法,但它的伎俩!
字符串
dpiehjr43#
如果有人在这个问题上绊倒了,
ReactNativeComponentTree
已经从0.56版本中删除了。然而,我发现了一种更干净的方法来检测某个(子)元素上的点击:
字符串
基本上,我们只是使用一个引用(
ref
)来访问使用findNodeHandle
的元素的node-id。然后,我们将该节点ID与
nativeEvent.target
节点ID进行比较,以检查是否有子元素被分接。在上面的示例中,只有第二个
<Text>
节点产生输出。3npbholx4#
在react native v.0.51中,您需要以下语句:
字符串
._currentElement.props
变更为.memoizedProps
q3aa05255#
在react native v.0.42中,您需要以下语句:
字符串
gv8xihay6#
解决问题的另一种方法是使用ref(与createRef一起使用),如下所示:
字符串
这样做的另一个好处是,ref可以是任何东西,不必是被触摸的节点。
hujrc8aj7#
关注点是性能,所以我用这种方法解决了它
只需围绕TouchableOpacity或任何可单击视图创建一个 Package 器
字符串
这样你的可触摸组件就不会重新渲染
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。