React Native Android端WebView弹出键盘时页面不滚动问题求助

我来帮你搞定这个Android端WebView输入框被键盘遮挡的问题！这个坑我之前开发React Native项目时也踩过，给你几个经过验证的解决方案：

1. 优先调整Android Activity的软键盘模式 #

这是最基础也最有效的一步，Android默认的软键盘行为不会自动调整WebView的布局。你需要修改Android项目的AndroidManifest.xml文件：

找到你的项目中android/app/src/main/AndroidManifest.xml里的主Activity标签，添加android:windowSoftInputMode="adjustResize"属性：

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize" <!-- 加上这行 -->
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode">
    <!-- 其他原有配置 -->
</activity>

⚠️ 注意：如果你的Activity设置了全屏模式或者沉浸式状态栏，adjustResize可能会失效，这种情况下需要额外处理状态栏的布局冲突。

2. 调整WebView组件属性并注入JS辅助适配 #

如果修改Manifest后还是有问题，可以试试调整WebView的属性，同时注入JS代码动态调整输入框位置：

• 首先，把你当前的automaticallyAdjustContentInsets={false}改成true（或者直接移除，新版本react-native-webview默认会处理）；
• 然后更新你的injectedJavaScript，添加监听窗口resize的逻辑：

const jsCode = `
  // 监听窗口尺寸变化，判断键盘是否弹出
  window.addEventListener('resize', function() {
    // 替换成你实际的聊天输入框类名
    const inputBox = document.querySelector('.chat-input');
    if (!inputBox) return;
    
    const keyboardHeight = window.innerHeight - document.documentElement.clientHeight;
    if (keyboardHeight > 0) {
      // 键盘弹出时，把输入框上移键盘高度
      inputBox.style.transform = \`translateY(-\${keyboardHeight}px)\`;
    } else {
      // 键盘收起时恢复原位
      inputBox.style.transform = 'translateY(0)';
    }
  });
`;

记得把.chat-input替换成你HTML页面中聊天输入框的实际CSS类名。

3. 用键盘感知滚动组件包裹WebView #

如果上面的方法都不生效，可以尝试用react-native-keyboard-aware-scroll-view这个库，它能自动让页面跟随键盘滚动：

首先安装依赖：

npm install react-native-keyboard-aware-scroll-view --save

然后修改你的组件代码：

import KeyboardAwareScrollView from 'react-native-keyboard-aware-scroll-view';

// 把WebView包裹在KeyboardAwareScrollView里
<KeyboardAwareScrollView
  contentContainerStyle={{ flex: 1 }}
  enableOnAndroid={true} // 必须开启Android支持
  extraScrollHeight={20} // 可选，添加额外滚动高度避免输入框贴键盘
>
  <WebView
    originWhitelist={["https://*", "http://*", "file://*", "sms://*", "tel://*"]}
    automaticallyAdjustContentInsets={true}
    source={{ uri: 'http://sample.com/sample/chat.html' }}
    scalesPageToFit={false}
    injectedJavaScript={jsCode}
    javaScriptEnabled={true}
    domStorageEnabled={true}
  />
</KeyboardAwareScrollView>

4. 检查WebView版本和硬件加速 #

如果你的react-native-webview版本比较旧，可能存在兼容性问题，建议更新到最新稳定版：

npm update react-native-webview

另外，某些情况下Android的硬件加速会影响WebView的布局调整，可以尝试给WebView添加androidLayerType="software"属性：

<WebView
  // 其他属性
  androidLayerType="software"
/>

一般按照这个顺序尝试，就能解决Android端WebView输入框被键盘遮挡的问题了！

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