React Native安卓端react-native-autocomplete-input zIndex点击穿透问题求解

API 探路者

2026-9-29

解决方案

安卓端zIndex仅控制非交互内容的绘制层级，涉及触摸事件分发、可交互组件（如输入框）的重叠优先级时，仅设置zIndex无效，必须配合安卓专属的elevation属性才能正确控制层级，你的问题可以通过该属性解决，操作如下：

移除输入相关容器的负zIndex配置，负zIndex会导致组件被绘制到父容器底层，反而会加重触摸穿透问题
给建议列表list和listContainer添加足够高的elevation值（安卓elevation数值越高，层级越高，最大建议不超过30，过高无实际意义）
给上方自动完成组件的外层container设置比下方自动完成组件外层容器更高的elevation，保证上方组件整体层级高于下方输入框

修改后的样式参考：

const androidStyles = {
  container: {
    flex: 1,
    position: 'relative',
    // 上方输入框的外层container设置elevation: 10，下方输入框的外层container设置elevation: 5即可，保证上方整体层级更高
  },
  inputContainer: {
    marginBottom: 0,
    left: 40,
  },
  input: {
    flex: 1,
    flexDirection: 'row',
    alignSelf: 'flex-start',
    justifyContent: 'flex-end',
    maxHeight: 200,
    fontSize: 15,
    borderWidth: 0,
    textAlign: 'right',
  },
  list: {
    ...border,
    backgroundColor: 'white',
    borderTopWidth: 1,
    margin: 10,
    marginTop: 1,
    zIndex: 99999,
    elevation: 20, // 新增高elevation保证触摸优先级
    shadowColor: 'transparent', // 不需要elevation自带阴影可添加该行
    borderRadius: 15,
    width: '65%',
  },
  listContainer: {
    zIndex: 99999,
    elevation: 20, // 和list保持一致的elevation
  }
};