我正在用本机构建一个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
的不同组合,但没有成功。
此问题是否有可能的解决方法,例如强制将一个放置的元素的点击优先权强于另一个?