Как обнаружить касания за пределами раскрывающегося меню, чтобы закрыть его в ответном нативном режиме ⇐ CSS

[Anonymous]

Я хотел использовать zeego для выпадающих меню, но, поскольку ему не хватает определенных функций в Android, я решил отказаться от этой идеи, поскольку разрабатываю приложение, ориентированное в первую очередь на Android. Поэтому я решил составить свое собственное меню. Это меню присутствует внутри компонента ScreenHeader, который отображается как заголовок экрана, как показано ниже.

Код: Выделить всё

 (

),
}}
/>

ScreenHeader.tsx

Код: Выделить всё

  
// other code
{isDropDownMenuVisible && }

и компонент меню выглядит так

Код: Выделить всё

const Menu = ({ buttons }: { buttons: PropsType[] }) => {
const [menuVisible, setMenuVisible] = useState(false);
// some reanimate code

return (





{menuVisible && (

{buttons.map((item) => (

{item.icon}

{item.title}


))}

)}

);
};

Переключение меню работает как обычно, когда пользователь нажимает на три точки. Но теперь я хочу, чтобы пользователь мог закрыть меню, когда он щелкнет в любом месте за пределами меню, что является обычной функцией во всех приложениях. Но поскольку я новичок в реагировании на родной язык, я понятия не имею, как это сделать. Я поискал в чате gpt, который предложил мне использовать для этого комбинацию модального и сенсорного без обратной связи, но я не думаю, что именно так работает обнаружение касаний за пределами меню в профессиональных приложениях или библиотеках пользовательского интерфейса. Более того, использование модального окна также портит расположение меню относительно кнопки.
Поэтому может кто-нибудь подсказать мне, как я могу обнаружить касания за пределами меню, чтобы закрыть его.

Подробнее здесь: https://stackoverflow.com/questions/787 ... act-native