使用React-Native-Gifted-Chat时如何隐藏安卓键盘及解决输入框被遮挡问题

核心适配逻辑 #

安卓与iOS的软键盘唤起逻辑存在原生差异，你之前的写法存在三个问题：未配置安卓端软键盘调整模式、组件嵌套层级错误、GiftedChat自带键盘适配逻辑和外层KeyboardAvoidingView冲突，按以下步骤修改即可解决： #

1. 配置安卓软键盘调整模式 #

修改配置后需要重新编译运行项目，热更新不会生效

• 如果你是Expo项目，在app.json的安卓配置块下添加：

"android": {
  "windowSoftInputMode": "adjustResize"
}

• 如果你是原生RN项目，在AndroidManifest.xml的MainActivity标签下，修改android:windowSoftInputMode值为adjustResize。

2. 调整组件嵌套结构与属性 #

• SafeAreaView放在最外层，负责适配状态栏等安全区域
• 给KeyboardAvoidingView设置flex: 1撑满全屏，同时根据平台指定适配行为

3. 关闭GiftedChat内置键盘处理 #

给GiftedChat添加isKeyboardInternallyHandled={false}属性，禁用自带的键盘适配逻辑，避免和外层组件冲突。

完整可运行代码示例 #

import { KeyboardAvoidingView, SafeAreaView, Platform } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';

// 组件内部渲染代码
<SafeAreaView style={{flex: 1}}>
  <KeyboardAvoidingView
    style={{flex: 1}}
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    // 如果页面顶部有自定义导航栏，添加下面的offset属性，值为导航栏实际高度
    // keyboardVerticalOffset={Platform.OS === 'ios' ? 44 : 0}
  >
    <GiftedChat
      messages={messages}
      showAvatarForEveryMessage={true}
      onSend={messages => onSend(messages)}
      user={{
        _id:1,
      }}
      isKeyboardInternallyHandled={false}
    />
  </KeyboardAvoidingView>
</SafeAreaView>

异常排查 #

如果输入框还是存在偏移，调整keyboardVerticalOffset的数值即可，安卓和iOS可以分别设置不同值适配；不要给GiftedChat外层额外加固定高度限制，避免挤压输入框位置。

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