检查两个视图是否在本机

Question

有没有人知道如何检查两个视图（父容器的子视图）是否与react native重叠？

如果我不是一个超级紧张的操作（即测量所有视图等）也会很好，因为我希望它能够经常完成。

非常感谢任何想法！ :)

编辑： 我意识到我的问题非常普遍，所以我会尝试让它更清晰。

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

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

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

Answer 1

这是一个非常通用的问题......但我确实有一些提示来自我对反应原生的经验。通常当您无法在视图中看到组件时，原因如下：

• 如果你有UI组件，例如View，Image in＆＃39; absolute＆＃39;位置，确保取消该属性并检查其是否呈现。
• 如果它是一个大型组件，由于某种原因无法呈现，请将其替换为更小的更简单组件，以查看其是否呈现，以便确保问题出现在视图中而不是纯代码中。我通常只是将一个带有一些jibrish的Text组件放入其中来测试错误。

• 如果组件是flexbox /内部组件 - 有时添加以下组合有助于：

  flex: 1 justifyContent: 'center', alignItems, 'center', flexDirection: 'row'

• 我无法解释，但我有多次出现我删除了flex: 1属性并且它有所帮助，请确保检查。

• 确保实际返回复杂内循环中的项目。例如：

WRONG：

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

正确：

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

• 同时确保启用热重载＆amp;远程调试（摇动设备） - 非常有用，使你的代码快5倍，