React Native：TextInput上层绝对定位按钮点击失效问题

问题出在React Native的组件层级渲染逻辑：后渲染的组件会处于视觉层级的上层。你的代码里先渲染了绝对定位的图标容器，再渲染TextInput，导致TextInput实际覆盖在图标上方，点击图标时触发的是TextInput的焦点事件，而非图标的onPress。

下面是两种简单的解决方法：

方法一：调整组件渲染顺序 #

把TextInput放在图标容器之前渲染，让图标容器处于TextInput的上层：

<View style={{width: '100%'}}>
  <MyTextInput
    placeholder="search"
    value={value}
    onChange={val => this.setState({value: val.nativeEvent.text})}
    inputStyle={{paddingLeft: 46}}
  />
  <View
    style={{
      position: 'absolute',
      alignItems: 'center',
      justifyContent: 'space-between',
      height: '100%',
      width: '100%',
      flexDirection: 'row',
    }}>
    <Icon
      name="search-outline"
      type="ionicon"
      size={30}
      style={{marginLeft: 8}}
    />
    {value != '' && (
      <Icon
        name="close-outline"
        type="ionicon"
        size={30}
        style={{marginRight: 8}}
        onPress={() => this.setState({value: ''})}
      />
    )}
  </View>
</View>

方法二：设置zIndex提升图标容器层级 #

给绝对定位的图标容器添加zIndex属性，强制让它的层级高于TextInput：

<View style={{width: '100%'}}>
  <View
    style={{
      position: 'absolute',
      alignItems: 'center',
      justifyContent: 'space-between',
      height: '100%',
      width: '100%',
      flexDirection: 'row',
      zIndex: 1, // 提升层级
    }}>
    <Icon
      name="search-outline"
      type="ionicon"
      size={30}
      style={{marginLeft: 8}}
    />
    {value != '' && (
      <Icon
        name="close-outline"
        type="ionicon"
        size={30}
        style={{marginRight: 8}}
        onPress={() => this.setState({value: ''})}
      />
    )}
  </View>
  <MyTextInput
    placeholder="search"
    value={value}
    onChange={val => this.setState({value: val.nativeEvent.text})}
    inputStyle={{paddingLeft: 46}}
  />
</View>

如果使用方法后问题仍存在，检查MyTextInput组件内部是否设置了pointerEvents属性，确保它没有阻止上层元素的点击事件。

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