React Native使用react-native-dropdown-picker下拉选项无法点击问题求解

问题原因 #

这是典型的视图层级不足导致的点击穿透问题，具体触发原因有两个：

• 仅给iOS平台的外层容器设置了极低的zIndex，安卓端未做任何层级配置，安卓系统视图层级优先级以elevation属性为准，仅设置zIndex不会生效
• 展开的下拉菜单容器没有配置层级属性，实际渲染层级低于下方的头像容器，点击事件会被下层元素优先捕获

修复步骤 #

1. 调整组件层级配置 #

给外层容器、下拉组件本体、下拉展开容器都设置足够高的层级，安卓端额外补充elevation属性，修改后的代码如下：

// 外层容器统一设置高zIndex，不区分平台
<View style={[styles.filterCompany, { zIndex: 100 }]}>
    <DropDownPicker
        items={colleguesList}
        open={showDropDown}
        setOpen={() => setShowDropDown(!showDropDown)}
        value={category}
        setValue={value => setCategory(value)}
        dropDownContainerStyle={{
            width: 170,
            alignSelf: 'center',
            position: 'absolute',
            top: 10,
            borderColor: Colors.SBLighBlue,
            backgroundColor: Colors.SBLighBlue,
            // 下拉容器设置最高层级
            zIndex: 1000,
            // 安卓端补充elevation提升层级
            elevation: 1000
        }}
        textStyle={{
            fontFamily: customFonts.medium,
            color: Colors.SBWhite,
            fontSize: 16,
            justifyContent: 'center'
        }}
        labelStyle={{
            fontWeight: 'bold',
            color: Colors.SBWhite
        }}
        arrowIconStyle={{
            tintColor: Colors.SBWhite
        }}
        tickIconStyle={{
            tintColor: Colors.SBWhite
        }}
        listMode="SCROLLVIEW"
        style={{
            width: 170,
            height: 40,
            alignSelf: 'center',
            marginTop: 10,
            backgroundColor: Colors.SBLighBlue,
            borderColor: Colors.SBLighBlue,
            zIndex: 100
        }}
    />
</View>

2. 可选兜底方案 #

如果调整层级后仍有偶发穿透问题，可以给下方头像容器加上点击事件控制，下拉展开时禁止下层元素响应点击：

<View style={styles.listAvatar} pointerEvents={showDropDown ? 'none' : 'auto'}>

问题示意图 #

内容的提问来源于stack exchange，提问作者Manko