Question

我正在用本机构建一个Login表单，其中有2个文本输入，一个用于手机号码，一个用于密码。手机输入还可以通过下拉菜单选择国家/地区代码，如下图所示：

从主屏幕组件中，插入两个textinput作为自定义组件：

<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重叠的按钮，即，当我实际点击它们时，底层的TextInput会专注于触发TouchableOpacity onPress属性。我尝试了zIndex的不同组合，但没有成功。

此问题是否有可能的解决方法，例如强制将一个放置的元素的点击优先权强于另一个？