React Native-使绝对定位的元素在文本输入上可触摸

时间:2019-01-15 13:50:42

标签: react-native react-native-android

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

Image with closed dropdown Image with open dropdown

从主屏幕组件中,插入两个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的不同组合,但没有成功。

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

0 个答案:

没有答案