如何在React Native应用的Android WebView中实现密码自动填充

核心原因 #

Android 系统的WebView默认未适配Google密码管理器的自动填充触发逻辑，即使密码已经成功保存到Google账号，缺少对应配置的WebView也无法识别登录表单、弹出填充提示。

解决方案 #

1. WebView基础属性配置 #

确认你使用的是官方维护的react-native-webview库，而非React Native核心自带的废弃WebView组件，给组件添加以下基础配置：

<WebView
  source={{ uri: '你的登录页地址' }}
  // 基础交互权限
  javaScriptEnabled={true}
  domStorageEnabled={true}
  allowFileAccess={true}
  // 开启硬件加速，自动填充弹窗依赖该配置渲染
  androidHardwareAccelerationDisabled={false}
  // 可选：对齐Chrome的User-Agent，避免Google密码管理器识别为异常环境
  userAgent="Mozilla/5.0 (Linux; Android 13; SM-G998B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36"
/>

2. AndroidManifest权限配置 #

打开android/app/src/main/AndroidManifest.xml，给承载WebView的Activity（通常是MainActivity）添加自动填充相关属性：

<activity
  android:name=".MainActivity"
  <!-- 新增以下两个配置 -->
  android:importantForAutofill="yes"
  android:autofillHints="username,password"
  ... 其他原有配置
>

3. 网页端表单适配 #

确保你的登录页表单输入框添加了标准的autocomplete属性，该配置是密码管理器识别表单的核心依据，必须配置正确：

<!-- 用户名/账号输入框 -->
<input type="text" name="username" autocomplete="username" />
<!-- 密码输入框 -->
<input type="password" name="password" autocomplete="current-password" />

4. 原生层WebView配置（前面步骤无效时使用） #

如果以上配置完成后仍不触发填充，需要修改WebView的原生初始化逻辑，可通过自定义原生WebView组件或者用patch-package修改react-native-webview的原生代码，添加以下配置：

webView.settings.apply {
    // 开启表单和密码保存权限
    savePassword = true
    saveFormData = true
    javaScriptCanOpenWindowsAutomatically = true
}
// 适配Android 8.0及以上的自动填充框架
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    webView.importantForAutofill = View.IMPORTANT_FOR_AUTOFILL_YES
}

5. 设备配置验证 #

测试前确认手机已开启Google自动填充服务：进入系统设置>语言和输入法>自动填充服务，确认选中「Google密码管理器」，且没有禁用当前React Native应用的自动填充权限。

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