React Native-在任何触摸事件上都关闭菜单

Question

我希望有一个小菜单，如果用户与任何其他组件进行交互，则会关闭该菜单。例如，如果用户尝试滚动菜单后面的滚动视图中的任何内容或与之交互（请参见下图以供参考）。

对于如何实现这一目标，我有两个想法：

1. 菜单后面的透明层，其绝对位置和尺寸与设备匹配。如果该层记录了触摸事件，则可以取消菜单。问题是从用户的角度来看，触摸事件被完全忽略了。因此，为了使其正常运行，我需要仍然能够将触摸事件通过绝对层传递到其背后的内容。
2. 向可能与之交互的每个组件添加回调，以通知菜单它应该关闭。此选项似乎非常混乱，并且由于我的用例中包含大量组件，因此实现和维护不切实际。

还有其他解决此问题的适当方法吗？我对以上想法提出的任何问题都可以解决或减轻吗？

Answer 1

使用TouchableWithoutFeedback组件包装视图，并为其提供onPress回调，如果菜单打开则将其隐藏。根据“扩展”图标的顶层位置，您可能希望在redux中跟踪菜单的可见性，并在onPress上调度操作以进行全局跟踪。