检查两个视图在 React Native 中是否重叠

Question

有谁知道如何在本机反应中检查两个视图（父容器的子视图）是否重叠？

如果我不是一个压力很大的操作（即测量所有视图等），那也很好，因为我希望它经常完成。

任何想法都非常感激！:)

编辑：我意识到我的问题确实很笼统，所以我会尽力使其更清晰一些。

我想要实现的是某种观察程序功能来检测两个视图之间的碰撞，这些视图可以在重新渲染时改变位置。

例如（抱歉，由于代表太低，我无法嵌入图像）：场景

在上图中，两个视图可以更改特定事件的位置，并且当这两个视图重叠时我需要回调。

Answer 1

这是一个非常普遍的问题……但根据我的反应原生经验，我确实有一些提示。通常，当您在视图中看不到某个组件时，其原因如下：

如果您的 UI 组件（例如视图、图像）位于“绝对”位置，请确保取消该属性并检查其是否渲染。
如果它是一个大型组件，由于某种原因无法渲染，请将其替换为更小的更简单的组件以查看其是否渲染，以便您可以确保问题出在视图中而不是在纯代码中。我通常只是放置一个带有一些乱码的文本组件，只是为了测试这样的错误。
如果组件是一个弹性盒/内部组件 - 有时添加以下内容的组合会有所帮助：

flex: 1 justifyContent: 'center', alignItems, 'center', flexDirection: 'row'
我无法解释它，但我曾多次删除该flex: 1属性，这很有帮助，请务必检查一下。
确保您实际上在复杂的内部循环中返回了一个项目。例如：

错误的：

myList.map( (item) => { return <View>{item}</View> } )

正确的：

return myList.map( (item) => { return <View>{item}</View> } )