Native Base Select组件安卓端点击弹出键盘而非选项列表问题求助

问题情况 #

升级到Native Base 3.4.28后，Select组件在安卓端出现两个异常：

• 点击组件时弹出系统键盘而非选项列表，iOS端表现正常
• 隐藏下拉图标后，安卓端仅能点击原图标位置唤起选项，iOS点击组件任意区域均可触发
• 此前使用3.2.1版本时两端行为一致，尝试在onOpen中关闭键盘未生效

可行解决办法 #

办法1：外层包裹接管点击+禁用输入框焦点 #

用View包裹Select，让外层处理点击事件并直接调用Select的开关方法，同时禁用内部输入框的可编辑状态，从根源阻止键盘弹出：

// 先定义组件ref
const selectRef = useRef(null);

// 组件代码
<View flex={1} onPress={() => selectRef.current?.toggleOpen()}>
  <Select
    ref={selectRef}
    flex={1}
    dropdownIcon={() => null}
    selectedValue={props.value}
    placeholder="Gender"
    _selectedItem={{
      bg: 'primary.100',
      endIcon: <CheckIcon size="5" />,
    }}
    onValueChange={props.handleChange}
    fontWeight={props.value ? 600 : 400}
    fontSize={'14px'}
    // 禁用输入框编辑与自动聚焦
    textInputProps={{ editable: false, autoFocus: false }}
    // 让Select内部不处理点击事件，交由外层接管
    pointerEvents="none"
    {...props.selectProps}
  >
    <Select.Item label="Female" value={Gender.FEMALE} />
    <Select.Item label="Male" value={Gender.MALE} />
    <Select.Item label="Non binary" value={Gender.NON_BINARY} />
    <Select.Item label="Not listed above" value={Gender.NOT_LISTED_ABOVE} />
    <Select.Item label="Prefer not to say" value={Gender.PREFER_NOT_TO_SAY} />
  </Select>
</View>

办法2：回退到稳定版本 #

若不想调整代码结构，直接回退到3.2.1版本即可恢复两端一致的正常表现，待Native Base官方修复3.4.28版本的兼容性问题后再考虑升级。

办法3：扩展下拉图标点击范围 #

将下拉图标替换为覆盖整个Select组件的透明View，使点击组件任意位置都能触发下拉逻辑：

<Select
  // 保留原有属性
  dropdownIcon={() => (
    <View 
      style={{ 
        width: '100%', 
        height: '100%', 
        position: 'absolute', 
        top: 0, 
        left: 0 
      }} 
    />
  )}
>
  {/* 选项内容 */}
</Select>

透明View会覆盖整个组件区域，点击任意位置都等同于触发下拉图标点击事件，从而唤起选项列表。

补充说明 #

安卓端的异常大概率是3.4.28版本中Select组件的内部逻辑变更导致——比如输入框焦点处理、点击区域判断逻辑调整，使得两端行为不一致。之前尝试onOpen关闭键盘无效，是因为键盘唤起时机早于onOpen事件触发，因此需从根源阻止输入框获取焦点。

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