Я создаю форму для входа в систему с двумя текстовыми входами, один для номера мобильного телефона и один для пароля. На входе мобильного телефона также есть возможность выбрать код страны с раскрывающимся списком, как показано на следующих изображениях:
Из компонента основного экрана я вставляю два текстовых ввода в качестве пользовательских компонентов:
<CustomInput type="phone" style={/* ... */} ...props />
<CustomInput type="password" style={/* ... */} ...props />
Затем в телефоне CustomInput я позиционирую раскрывающийся список с помощью position: 'absolute' и пользовательского позиционирования сверху / слева. Я также использовал свойство zIndex для отображения выпадающего меню над фактическими TextInputs, и оно прекрасно работает. Раскрывающийся список состоит из списка
<TouchableOpacity onPress={/* do stuff */}>
<Text>text</Text>
</TouchableOpacity>
Хотя в iOS нет проблем, в Android кнопки, которые перекрываются с вводом текста пароля, не касаются, т. Е. Когда я на самом деле их касаюсь, базовый TextInput получает фокус вместо запуска свойства TouchableOpacity onPress. Я пробовал разные комбинации zIndex безуспешно.
Есть ли какой-нибудь возможный обходной путь для этой проблемы, например, принудительный приоритет касания элементов, расположенных один над другим?