react-native深层嵌套覆盖

Question

TLDR;

从组件层次结构深处的某个位置创建覆盖整个屏幕的叠加层的最佳方法是什么？

有一个名为react-native-overlay的lib，似乎已被放弃。感觉这应该可以解决核心RN功能。

只是提供一些背景;基本上，这个想法是模仿一个应用程序，像Facebook一样的项目菜单，见下图。基本上，每个项目都应该有自己的菜单按钮。点击菜单按钮时，会出现一个菜单。点击菜单外部应关闭菜单。

现在;

1. AFAIK，没有窗口可以添加点击处理程序，以便检测菜单区域外的点击时间。因此，我的想法是创建一个覆盖整个屏幕的覆盖图，以便能够捕获水龙头。

2. 创建此类叠加层的最佳方法是什么？ position: 'absolute'仅与父组件相关，因为除非明确指定，否则每个组件都有position: 'relative'。

一个选项是添加onLayout处理程序，然后将top / left设置为负值以补偿组件的偏移量，但这感觉很乱。

Answer 1

您是否尝试过https://github.com/magicismight/react-native-root-modal？

它类似于react-native-overlay，但是使用纯JavaScript实现