React Native - 在任何觸摸事件上關閉菜單

Question

如果用戶與任何其他組件交互，我想要一個關閉的小菜單。 例如，如果用戶嘗試滾動或與菜單后面的滾動視圖中的任何內容進行交互（請參閱下面的圖像以供參考）。

關於如何實現這一點，我有兩個想法：

1. 菜單后面的透明層，其絕對位置和尺寸與設備相匹配。 如果該層注冊觸摸事件，則可以取消菜單。 問題在於，從用戶的角度來看，觸摸事件完全被忽略了。 因此，為了使其工作良好，我需要能夠仍然通過絕對層將觸摸事件傳遞給它背后的內容。
2. 將回調添加到可以與之交互的每個組件，以通知菜單它應該關閉。 這個選項看起來很亂，因為我的用例中有大量的組件，所以實現和維護是不切實際的。

還有其他正確的方法可以解決這個問題嗎？ 我提出的任何與上述想法有關的問題都可以解決或減輕嗎？

Answer 1

使用TouchableWithoutFeedback組件包裹您的視圖，並為其提供一個onPress回調，如果菜單打開則會隱藏該菜單。 根據“展開”圖標的頂級級別，您可能希望跟蹤菜單在redux中的可見性，並在新聞發送動作以全局跟蹤。