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

Question

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

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

1. 菜单后面的透明层，其绝对位置和尺寸与设备匹配。如果该层注册了触摸事件，则可以关闭菜单。这样做的问题是，从用户的角度来看，触摸事件被完全忽略了。因此，要使其正常工作，我仍需要能够将触摸事件通过绝对层传递到其背后的内容。
2. 为每个可以交互的组件添加回调，以通知菜单它应该关闭。这个选项看起来会很混乱，而且由于我的用例中有大量组件，因此实施和维护是不切实际的。

还有其他合适的方法来解决这个问题吗？我提出的上述想法中的任何问题都可以解决或缓解吗？

Answer 1

使用 TouchableWithoutFeedback 组件包装您的视图，并为其提供 onPress 回调，以在菜单打开时隐藏菜单。根据“展开”图标的顶级程度，您可能希望跟踪菜单在 redux 中的可见性并调度一个操作 onPress 以进行全局跟踪。