React Native WebView自动上滑功能异常问题求助

针对你遇到的「React Native WebView加载购物网站时，底部输入框被键盘遮挡、页面无法自动上滑」的问题，以下是几种实测有效的解决方法：

方法1：修改Android原生配置（全局生效） #

找到项目中 android/app/src/main/AndroidManifest.xml 文件，修改主Activity的 windowSoftInputMode 属性为 adjustResize，让页面在键盘弹出时自动调整布局：

<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
  android:launchMode="singleTask"
  android:windowSoftInputMode="adjustResize">

注：如果 adjustResize 无效，可以尝试改为 adjustPan|adjustResize，部分机型需要组合属性生效。

方法2：通过WebView注入JS手动触发滚动 #

利用WebView的 injectJavaScript 方法，在输入框获得焦点时，强制页面滚动到输入框可见位置：

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const ShoppingWebView = () => {
  const webViewRef = useRef(null);

  const handleInputFocus = () => {
    const scrollScript = `
      const activeEl = document.activeElement;
      if (activeEl && ['INPUT', 'TEXTAREA'].includes(activeEl.tagName)) {
        activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    `;
    webViewRef.current?.injectJavaScript(scrollScript);
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: '你的购物网站URL' }}
      onFocus={handleInputFocus}
      javaScriptEnabled={true}
    />
  );
};

export default ShoppingWebView;

方法3：使用键盘感知滚动视图包裹WebView #

借助 react-native-keyboard-aware-scroll-view 库自动处理键盘弹出时的页面滚动：

1. 先安装依赖：

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

2. 包裹WebView使用：

import React from 'react';
import { WebView } from 'react-native-webview';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const ShoppingWebView = () => {
  return (
    <KeyboardAwareScrollView
      contentContainerStyle={{ flex: 1 }}
      enableOnAndroid={true}
      keyboardShouldPersistTaps="handled"
    >
      <WebView
        source={{ uri: '你的购物网站URL' }}
        style={{ flex: 1 }}
        javaScriptEnabled={true}
      />
    </KeyboardAwareScrollView>
  );
};

export default ShoppingWebView;

方法4：检查目标网站的Viewport配置 #

确保购物网站的viewport meta标签设置正确，避免因页面缩放导致滚动异常：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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