React Native中KeyboardAvoidingView与TextInput的光标移动异常问题

问题复现代码 #

<KeyboardAvoidingView behavior="position" style={{width: "100%", position: "absolute", bottom: 0}} >
    <View style={styles.container} >
            <TextInput />
    </View>
</KeyboardAvoidingView>

问题表现 #

使用上述代码时，在TextInput中输入文本后点击文本中间位置，光标无法移动；移除KeyboardAvoidingView组件后，光标可正常移动且文本选择功能恢复正常。

修复方案 #

这类问题多是KeyboardAvoidingView的position行为结合绝对定位，导致布局层级或触摸事件响应异常，可尝试以下几种方式解决：

• 切换行为模式：将behavior从"position"改为"padding"或"height"，这两种模式通过调整内边距或高度适配键盘，不会修改组件位置，能避免触摸事件拦截异常：

  <KeyboardAvoidingView behavior="padding" style={{width: "100%", position: "absolute", bottom: 0}} >
      <View style={styles.container} >
              <TextInput />
      </View>
  </KeyboardAvoidingView>
  

• 替换绝对定位布局：如果业务场景允许，去掉position: "absolute"和bottom: 0，改用flex布局将输入栏固定在底部，规避绝对定位带来的层级问题：

  <View style={{flex: 1, justifyContent: "flex-end"}}>
    <KeyboardAvoidingView behavior="position" style={{width: "100%"}} >
        <View style={styles.container} >
                <TextInput />
        </View>
    </KeyboardAvoidingView>
  </View>
  

• 允许触摸事件穿透：给KeyboardAvoidingView添加pointerEvents="box-none"属性，让触摸事件能穿透到子组件：

  <KeyboardAvoidingView 
    behavior="position" 
    style={{width: "100%", position: "absolute", bottom: 0}}
    pointerEvents="box-none"
  >
      <View style={styles.container} >
              <TextInput />
      </View>
  </KeyboardAvoidingView>
  

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