React Native WebView键盘难题：如何让输入框不被键盘遮挡？

写在前面

“明明点击了输入框，键盘却把内容顶得不见踪影！” —— 这可能是React Native开发者使用WebView时最头疼的问题之一。

想象一下：你的App内嵌了一个网页表单，用户兴奋地准备填写信息，结果键盘弹出后，输入框被无情地遮挡，用户不得不手动滑动才能看到自己输入的内容。糟糕的用户体验，直接影响了转化率！

但别担心，今天我们就来彻底解决这个顽疾，从底层原理到实战代码，一步步拆解，让你的WebView输入框在键盘弹出时优雅地"浮"上来！

---

一、问题根源：为什么键盘会"吃掉"输入框？

在React Native中，WebView本质上是一个"外来户"，它不像原生的TextInput那样能自动和键盘联动。当键盘弹出时，系统会调整布局，但WebView内部的内容并不会自动滚动到可视区域。

1. iOS vs. Android：不同的表现

• iOS：默认情况下，键盘会覆盖在视图上方，WebView不会自动调整滚动位置。
• Android：如果windowSoftInputMode设置为adjustResize，WebView会被压缩，但内部输入框可能仍然不会自动滚动到可视区域。

2. WebView的"独立性"问题

WebView本质上是一个浏览器引擎（iOS用WKWebView，Android用Chromium），它和React Native的布局系统是分离的。因此，键盘事件不会自动触发WebView内部滚动，导致输入框被遮挡。

---

二、终极解决方案：5种方法让输入框"浮"起来

方法1：KeyboardAvoidingView —— React Native的"救场英雄"

KeyboardAvoidingView是React Native自带的组件，可以动态调整布局，避免键盘遮挡。

import { KeyboardAvoidingView, Platform