React Native - закрытие меню на любом событии Touch

Question

Я хотел бы иметь маленькое меню, которое закрывается, если пользователь взаимодействует с любым другим компонентом.Например, если пользователь пытается прокрутить или взаимодействовать с любым содержимым в виде прокрутки за меню (см. Изображение ниже для справки).

У меня есть две идеи о том, как этого достичь:

1. Прозрачный слой за меню с абсолютной позицией и размерами, соответствующими устройству.Если этот слой регистрирует сенсорное событие, меню может быть закрыто.Проблема в том, что с точки зрения пользователей событие касания было полностью проигнорировано.Поэтому, чтобы это работало хорошо, мне нужно было бы иметь возможность передавать событие прикосновения через абсолютный слой к содержимому за ним.
2. Добавить обратные вызовы для каждого компонента, с которым можно взаимодействовать, чтобы уведомить меню о том, что онодолжен закрыться.Похоже, что эта опция была бы очень грязной, и из-за большого количества компонентов в моем случае ее использование нецелесообразно для реализации и обслуживания.

Есть ли другой правильный способ решения этой проблемы?Могут ли быть решены или смягчены какие-либо проблемы, которые я поднял в связи с изложенными выше идеями?

Answer 1

Оберните ваше представление компонентом TouchableWithoutFeedback и предоставьте ему обратный вызов onPress, который скрывает меню, если оно открыто.В зависимости от того, на каком верхнем уровне находится значок «развернуть», может потребоваться отслеживать видимость меню в режиме редукции и отправлять действие для отслеживания в глобальном масштабе.