React Native：键盘弹出时如何正确调整输入框位置（iOS & Android 实战）

React Native：键盘弹出时如何正确调整输入框位置（iOS & Android 实战）

在开发聊天类应用（Chat UI）时，一个非常常见、但又容易踩坑的问题是： 当键盘弹出时，输入框被遮挡，或者整体布局错乱。

本文将结合一个真实的 React Native 聊天界面示例，详细说明：

• 如何在键盘弹出时自动上移输入框
• 为什么 KeyboardAvoidingView 是首选方案
• iOS 和 Android 需要注意的差异和额外配置

---

一、核心思路：使用 KeyboardAvoidingView

在 React Native 中，官方推荐用于处理键盘遮挡问题的组件是：

KeyboardAvoidingView

在本项目中，整个聊天页面被包裹在 KeyboardAvoidingView 中：

<KeyboardAvoidingView
  style={styles.root}
  behavior="padding"
  keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 80}
>
  {/* Chat content */}
</KeyboardAvoidingView>

这样做的好处是：

• 键盘弹出时，系统自动为内容腾出空间
• 输入框始终可见，不会被遮挡
• 无需手动监听 keyboard show / hide 事件

---

二、behavior 属性如何选择？

KeyboardAvoidingView 的 behavior 决定了布局如何响应键盘：

• padding（推荐）：通过增加底部 padding 上移内容
• height：减少视图高度（Android 上偶尔会闪动）
• position：通过 position 调整（不稳定，较少使用）

在聊天类 UI 中，padding 是最稳定、体验最好的选择。

---

三、keyboardVerticalOffset：为什么必须设置？

如果你的页面顶部有：

• 导航栏（Navigation Header）
• 自定义 Header
• Status Bar / Safe Area

那么你必须设置 keyboardVerticalOffset，否则输入框会上移过头或位置不准确。

在示例中，我们针对不同平台做了区分：

keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 80}

经验建议：

• iOS：通常需要更大的 offset（包含状态栏 + header）
• Android：offset 较小即可

---

四、FlatList 与键盘的配合技巧

聊天页面通常使用 FlatList，这里有两个关键点：

<FlatList
  keyboardDismissMode="on-drag"
  contentContainerStyle={styles.messagesContent}
/>

• keyboardDismissMode="on-drag"：用户滑动聊天记录时自动收起键盘
• 避免键盘与滚动手势冲突

同时，在消息更新时自动滚动到底部：

useEffect(() => {
  flatListRef.current?.scrollToEnd({ animated: true });
}, [messages]);

---

五、发送消息后自动收起键盘

为了获得更自然的聊天体验，发送消息后我们会主动关闭键盘：

if (inputRef.current) {
  inputRef.current.blur();
}

这在 Android 上尤其重要，可以避免输入框高度抖动。

---

六、Android 必须检查的系统配置（非常重要）

如果你发现：

• KeyboardAvoidingView 在 Android 完全不生效
• 输入框仍然被键盘遮挡

请务必检查 AndroidManifest.xml：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize">

adjustResize 是关键，否则 Android 不会为键盘腾出布局空间。

---

七、iOS 的额外注意事项

• 建议使用 Safe Area（尤其是 iPhone X 及以上）
• 避免在 KeyboardAvoidingView 内嵌套绝对定位元素
• 如果使用 react-navigation，注意 header 高度

---

总结

一个稳定、顺滑的聊天输入体验，关键在于：

• 使用 KeyboardAvoidingView
• 正确设置 behavior 和 keyboardVerticalOffset
• 区分 iOS / Android 平台差异
• Android 必须开启 adjustResize

只要以上几点做到位，聊天输入框在键盘弹出时的位置问题，基本可以彻底解决。

Happy coding 🚀

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️