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

Question

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

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

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

还有其他正确的方法可以解决这个问题吗？ 我提出的任何与上述想法有关的问题都可以解决或减轻吗？

Answer 1

使用TouchableWithoutFeedback组件包裹您的视图，并为其提供一个onPress回调，如果菜单打开则会隐藏该菜单。 根据“展开”图标的顶级级别，您可能希望跟踪菜单在redux中的可见性，并在新闻发送动作以全局跟踪。