React Native WebView加载Google Captcha显示空白白屏求助

问题分析 #

你的代码存在几个关键错误导致WebView无法正常渲染：

• 未闭合的<div>标签（第一行的<div没有闭合标记）
• 缺少完整的HTML文档结构（无<html>、<body>包裹内容）
• 不规范的DOM结构会导致reCAPTCHA脚本无法正确执行

解决方案 #

1. 修复HTML结构 #

补充完整的HTML文档框架，移除无效标签，确保DOM结构合法。

2. 优化WebView配置 #

启用必要的JavaScript和DOM存储功能，适配reCAPTCHA的加载需求。

3. 可选：添加验证结果回调 #

如果需要获取reCAPTCHA的验证token，可通过onMessage实现WebView与RN的通信。

修复后的完整代码 #

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

const CaptchaWebView = () => {
  const handleMessage = (event) => {
    // 接收reCAPTCHA返回的验证token
    const token = event.nativeEvent.data;
    console.log('reCAPTCHA Token:', token);
    // 此处可添加token提交到后端验证的逻辑
  };

  const htmlContent = `
    <html>
      <body style="margin:0; padding:0;">
        <script src="https://www.google.com/recaptcha/api.js?render=6Lel4Z4UAAAAAOa8LO1Q9mqKRUiMYl_00o5mXJrR" async defer></script>
        <div class="g-recaptcha" 
             data-sitekey="6Lel4Z4UAAAAAOa8LO1Q9mqKRUiMYl_00o5mXJrR"
             data-callback="sendTokenToRN"></div>
        <script>
          function sendTokenToRN(token) {
            // 将token传递给React Native
            window.ReactNativeWebView.postMessage(token);
          }
        </script>
      </body>
    </html>
  `;

  return (
    <WebView
      automaticallyAdjustContentInsets={false}
      source={{ html: htmlContent }}
      style={{ marginTop: 30, height: 150, width: Dimensions.get("window").width }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      allowUniversalAccessFromFileURLs={true} // Android 需开启
      allowFileAccess={true} // iOS 需开启
      onMessage={handleMessage}
    />
  );
};

export default CaptchaWebView;

额外注意事项 #

• 确认你的reCAPTCHA sitekey有效，并已将应用域名（或RN调试本地地址）添加到reCAPTCHA控制台的允许列表
• 调整WebView的height到150左右，避免reCAPTCHA组件被裁剪
• 确保设备能正常访问Google服务，国内环境需配置代理

内容的提问来源于stack exchange，提问作者React Native Guy