@beppla/tapas-ui 1.2.9 → 1.2.11

package/commonjs/WebViewBridge/WebViewBridge.js

@@ -0,0 +1,827 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleNativeWebViewMessage = exports.default = exports.createWebViewInjectedScript = exports.WebViewBridge = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * WebViewBridge - WebView/iframe 通信桥接组件
+ * 
+ * 用于 RN Web 模块与 tapas-sys 底座之间的通信
+ * - Android/iOS: 使用 WebView postMessage/onMessage
+ * - Web: 使用 iframe window.postMessage/onMessage
+ * 
+ * 自动检测运行环境并适配相应的通信方式
+ */
+
+/**
+ * tapas-sys 消息格式
+ */
+
+/**
+ * 检测当前运行环境
+ */
+const detectEnvironment = () => {
+  if (_reactNative.Platform.OS === 'web') {
+    // Web 环境：检查是否在 iframe 中
+    try {
+      if (typeof window !== 'undefined' && window.self !== window.top) {
+        return 'iframe';
+      }
+      // 也可能是在 WebView 中（通过 userAgent 判断）
+      const userAgent = window.navigator?.userAgent || '';
+      if (userAgent.includes('wv') || userAgent.includes('WebView')) {
+        return 'webview';
+      }
+      return 'iframe'; // 默认 Web 环境视为 iframe
+    } catch (e) {
+      return 'iframe';
+    }
+  } else {
+    // Android/iOS 环境：使用 WebView
+    return 'webview';
+  }
+};
+
+/**
+ * WebViewBridge 组件
+ */
+/**
+ * Base64 编码/解码工具函数
+ * 符合 tapas-sys 的解析格式
+ */
+const encodeBase64 = str => {
+  try {
+    // 浏览器环境：使用 btoa
+    if (typeof window !== 'undefined') {
+      // 处理 Unicode 字符
+      return window.btoa(unescape(encodeURIComponent(str)));
+    }
+    // Node.js 环境：使用 Buffer
+    if (typeof Buffer !== 'undefined') {
+      return Buffer.from(str, 'utf-8').toString('base64');
+    }
+    // 降级方案：尝试全局 btoa
+    if (typeof btoa !== 'undefined') {
+      return btoa(unescape(encodeURIComponent(str)));
+    }
+    throw new Error('Base64 编码不可用');
+  } catch (e) {
+    console.warn('WebViewBridge: Base64 编码失败，使用原始字符串', e);
+    return str;
+  }
+};
+const decodeBase64 = str => {
+  try {
+    // 浏览器环境：使用 atob
+    if (typeof window !== 'undefined') {
+      // 处理 Unicode 字符
+      return decodeURIComponent(escape(window.atob(str)));
+    }
+    // Node.js 环境：使用 Buffer
+    if (typeof Buffer !== 'undefined') {
+      return Buffer.from(str, 'base64').toString('utf-8');
+    }
+    // 降级方案：尝试全局 atob
+    if (typeof atob !== 'undefined') {
+      return decodeURIComponent(escape(atob(str)));
+    }
+    throw new Error('Base64 解码不可用');
+  } catch (e) {
+    console.warn('WebViewBridge: Base64 解码失败，返回原始字符串', e);
+    return str;
+  }
+};
+
+/**
+ * 日志工具函数
+ */
+const createLogger = (debug, logLevel) => {
+  const levels = ['none', 'error', 'warn', 'info', 'debug'];
+  const currentLevelIndex = levels.indexOf(logLevel);
+  const shouldLog = level => {
+    const levelIndex = levels.indexOf(level);
+    return levelIndex >= 0 && levelIndex <= currentLevelIndex;
+  };
+  return {
+    error: (...args) => {
+      if (shouldLog('error')) {
+        console.error('[WebViewBridge]', ...args);
+      }
+    },
+    warn: (...args) => {
+      if (shouldLog('warn')) {
+        console.warn('[WebViewBridge]', ...args);
+      }
+    },
+    info: (...args) => {
+      if (shouldLog('info')) {
+        console.log('[WebViewBridge]', ...args);
+      }
+    },
+    debug: (...args) => {
+      if (debug && shouldLog('debug')) {
+        console.log('[WebViewBridge DEBUG]', ...args);
+      }
+    }
+  };
+};
+
+/**
+ * 验证消息来源（origin）
+ */
+const validateOrigin = (origin, allowedOrigins, strictOriginCheck, logger) => {
+  // 如果没有设置 allowedOrigins，不进行验证（开发环境）
+  if (!allowedOrigins || allowedOrigins.length === 0) {
+    logger.debug('Origin 验证已禁用（allowedOrigins 为空）');
+    return true;
+  }
+
+  // 如果没有 origin（某些环境可能没有），根据 strictOriginCheck 决定
+  if (!origin) {
+    if (strictOriginCheck) {
+      logger.warn('消息没有 origin 信息，且 strictOriginCheck=true，拒绝消息');
+      return false;
+    }
+    logger.warn('消息没有 origin 信息，但 strictOriginCheck=false，允许消息');
+    return true;
+  }
+
+  // 检查 origin 是否在白名单中
+  const isAllowed = allowedOrigins.some(allowed => {
+    // 支持通配符匹配（如 'https://*.example.com'）
+    if (allowed.includes('*')) {
+      const pattern = allowed.replace(/\*/g, '.*');
+      const regex = new RegExp(`^${pattern}$`);
+      return regex.test(origin);
+    }
+    return origin === allowed;
+  });
+  if (!isAllowed) {
+    if (strictOriginCheck) {
+      logger.error(`消息来源 ${origin} 不在白名单中，拒绝消息。白名单:`, allowedOrigins);
+      return false;
+    }
+    logger.warn(`消息来源 ${origin} 不在白名单中，但 strictOriginCheck=false，允许消息。白名单:`, allowedOrigins);
+    return true;
+  }
+  logger.debug(`消息来源 ${origin} 验证通过`);
+  return true;
+};
+
+/**
+ * 验证消息的 from 字段
+ */
+const validateFrom = (messageFrom, allowedFrom, logger) => {
+  if (!allowedFrom || allowedFrom.length === 0) {
+    return true;
+  }
+  if (!messageFrom) {
+    logger.warn('消息没有 from 字段，但设置了 allowedFrom，拒绝消息');
+    return false;
+  }
+  const isAllowed = allowedFrom.includes(messageFrom);
+  if (!isAllowed) {
+    logger.warn(`消息 from 字段 ${messageFrom} 不在白名单中，拒绝消息。白名单:`, allowedFrom);
+    return false;
+  }
+  logger.debug(`消息 from 字段 ${messageFrom} 验证通过`);
+  return true;
+};
+const WebViewBridge = exports.WebViewBridge = /*#__PURE__*/(0, _react.forwardRef)(({
+  from,
+  onMessage,
+  onError,
+  initPayload,
+  autoInit = true,
+  initMessageType = 'init',
+  enableBase64 = true,
+  showPlaceholder = true,
+  style,
+  testID,
+  allowedOrigins,
+  strictOriginCheck = false,
+  allowedFrom,
+  messageFilter,
+  debug = false,
+  logLevel = 'warn'
+}, ref) => {
+  const environmentRef = (0, _react.useRef)(detectEnvironment());
+  const messageIdCounterRef = (0, _react.useRef)(0);
+  const initSentRef = (0, _react.useRef)(false);
+  const messageHandlersRef = (0, _react.useRef)(new Map());
+  const loggerRef = (0, _react.useRef)(createLogger(debug, logLevel));
+  const cleanupFunctionsRef = (0, _react.useRef)([]);
+
+  // 更新 logger 当 debug 或 logLevel 改变时
+  (0, _react.useEffect)(() => {
+    loggerRef.current = createLogger(debug, logLevel);
+  }, [debug, logLevel]);
+
+  // 生成唯一消息 ID
+  const generateMessageId = (0, _react.useCallback)(() => {
+    messageIdCounterRef.current += 1;
+    return `msg_${Date.now()}_${messageIdCounterRef.current}`;
+  }, []);
+
+  // 将 WebViewMessage 转换为 tapas-sys 格式
+  const convertToTapasSysFormat = (0, _react.useCallback)(message => {
+    const tapasMessage = {
+      operate: message.type,
+      from: message.from
+    };
+
+    // 处理 payload
+    if (message.payload !== undefined && message.payload !== null) {
+      // 如果 payload 是对象且包含 action 字段，提取 action
+      if (typeof message.payload === 'object' && !Array.isArray(message.payload) && 'action' in message.payload) {
+        tapasMessage.action = message.payload.action;
+        // data 包含 payload 的其他字段（排除 action）
+        const {
+          action,
+          ...rest
+        } = message.payload;
+        tapasMessage.data = Object.keys(rest).length > 0 ? rest : undefined;
+      } else {
+        // 否则，整个 payload 作为 data，action 使用 operate
+        tapasMessage.action = message.type;
+        tapasMessage.data = message.payload;
+      }
+    } else {
+      // 如果没有 payload，action 使用 operate
+      tapasMessage.action = message.type;
+    }
+    return tapasMessage;
+  }, []);
+
+  // 将 tapas-sys 格式转换为 WebViewMessage
+  const convertFromTapasSysFormat = (0, _react.useCallback)(tapasMessage => {
+    const message = {
+      type: tapasMessage.operate,
+      from: tapasMessage.from
+    };
+
+    // 构建 payload
+    if (tapasMessage.data !== undefined) {
+      // 如果有 action 且 action 不等于 operate，将 action 合并到 payload
+      if (tapasMessage.action && tapasMessage.action !== tapasMessage.operate) {
+        message.payload = {
+          action: tapasMessage.action,
+          ...(typeof tapasMessage.data === 'object' && tapasMessage.data !== null && !Array.isArray(tapasMessage.data) ? tapasMessage.data : {
+            data: tapasMessage.data
+          })
+        };
+      } else {
+        // 否则直接使用 data 作为 payload
+        message.payload = tapasMessage.data;
+      }
+    } else if (tapasMessage.action && tapasMessage.action !== tapasMessage.operate) {
+      // 只有 action，没有 data
+      message.payload = {
+        action: tapasMessage.action
+      };
+    }
+    return message;
+  }, []);
+
+  // 解析消息（支持 base64 解码）
+  const parseMessage = (0, _react.useCallback)(data => {
+    try {
+      // 尝试 base64 解码
+      let decodedData = data;
+      if (enableBase64) {
+        try {
+          decodedData = decodeBase64(data);
+          loggerRef.current.debug('Base64 解码成功');
+        } catch (e) {
+          // 如果 base64 解码失败，尝试直接解析 JSON
+          // 可能是未加密的消息
+          loggerRef.current.debug('Base64 解码失败，尝试直接解析 JSON', e);
+        }
+      }
+
+      // 解析 JSON
+      const parsed = typeof decodedData === 'string' ? JSON.parse(decodedData) : decodedData;
+
+      // 判断是 tapas-sys 格式还是 WebViewMessage 格式
+      let message;
+      if (parsed.operate !== undefined) {
+        // tapas-sys 格式：{ operate, action, data, from }
+        message = convertFromTapasSysFormat(parsed);
+      } else {
+        // WebViewMessage 格式：{ type, payload, from }
+        message = {
+          type: parsed.type || 'unknown',
+          payload: parsed.payload !== undefined ? parsed.payload : parsed,
+          timestamp: parsed.timestamp || Date.now(),
+          id: parsed.id,
+          from: parsed.from
+        };
+      }
+      loggerRef.current.debug('消息解析成功:', message);
+      return message;
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      loggerRef.current.error('消息解析失败', error, '原始数据:', data);
+      if (onError) {
+        onError(error, {
+          type: 'parse'
+        });
+      }
+      return null;
+    }
+  }, [enableBase64, onError, convertFromTapasSysFormat]);
+
+  // 统一消息格式
+  const normalizeMessage = (0, _react.useCallback)(rawMessage => {
+    let data = null;
+
+    // WebView 环境：消息通常在 data 字段中
+    if (environmentRef.current === 'webview') {
+      if (typeof rawMessage === 'string') {
+        data = rawMessage;
+      } else if (rawMessage?.nativeEvent?.data) {
+        data = rawMessage.nativeEvent.data;
+      } else if (rawMessage?.data) {
+        data = rawMessage.data;
+      } else {
+        // 直接是对象：检查是 tapas-sys 格式还是 WebViewMessage 格式
+        if (rawMessage?.operate !== undefined) {
+          return convertFromTapasSysFormat(rawMessage);
+        }
+        return {
+          type: rawMessage?.type || 'unknown',
+          payload: rawMessage?.payload || rawMessage,
+          timestamp: rawMessage?.timestamp || Date.now(),
+          id: rawMessage?.id,
+          from: rawMessage?.from
+        };
+      }
+    } else if (environmentRef.current === 'iframe') {
+      // iframe 环境：消息在 event.data 中
+      if (rawMessage?.data) {
+        data = rawMessage.data;
+      } else if (typeof rawMessage === 'string') {
+        data = rawMessage;
+      } else {
+        // 直接是对象：检查是 tapas-sys 格式还是 WebViewMessage 格式
+        if (rawMessage?.operate !== undefined) {
+          return convertFromTapasSysFormat(rawMessage);
+        }
+        return {
+          type: rawMessage?.type || 'unknown',
+          payload: rawMessage?.payload || rawMessage,
+          timestamp: rawMessage?.timestamp || Date.now(),
+          id: rawMessage?.id,
+          from: rawMessage?.from
+        };
+      }
+    } else {
+      // 未知环境：尝试通用解析
+      if (rawMessage?.operate !== undefined) {
+        return convertFromTapasSysFormat(rawMessage);
+      }
+      return {
+        type: rawMessage?.type || 'unknown',
+        payload: rawMessage?.payload || rawMessage,
+        timestamp: Date.now(),
+        from: rawMessage?.from
+      };
+    }
+
+    // 解析字符串数据
+    if (data) {
+      const parsed = parseMessage(data);
+      if (parsed) {
+        return parsed;
+      }
+    }
+
+    // 降级：返回原始数据
+    return {
+      type: 'raw',
+      payload: data || rawMessage,
+      timestamp: Date.now()
+    };
+  }, [parseMessage, convertFromTapasSysFormat]);
+
+  // 发送消息
+  const sendMessage = (0, _react.useCallback)((type, payload) => {
+    try {
+      const message = {
+        type,
+        payload,
+        timestamp: Date.now(),
+        id: generateMessageId(),
+        from: from // 添加 from 字段
+      };
+      loggerRef.current.debug('准备发送消息（内部格式）:', message);
+
+      // 转换为 tapas-sys 格式
+      const tapasMessage = convertToTapasSysFormat(message);
+      loggerRef.current.debug('转换为 tapas-sys 格式:', tapasMessage);
+
+      // 将消息对象转为 JSON 字符串
+      const messageJson = JSON.stringify(tapasMessage);
+
+      // 根据配置决定是否进行 base64 编码
+      const messageToSend = enableBase64 ? encodeBase64(messageJson) : messageJson;
+      if (typeof window === 'undefined') {
+        const error = new Error('window 对象不存在，无法发送消息');
+        loggerRef.current.error(error.message);
+        if (onError) {
+          onError(error, {
+            type: 'send'
+          });
+        }
+        return false;
+      }
+      let sent = false;
+
+      // 优先尝试 React Native WebView 的 postMessage（适用于 Android/iOS WebView）
+      if (window.ReactNativeWebView) {
+        try {
+          window.ReactNativeWebView.postMessage(messageToSend);
+          loggerRef.current.debug('通过 ReactNativeWebView.postMessage 发送成功');
+          sent = true;
+          return true;
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.warn('ReactNativeWebView.postMessage 失败', error);
+          if (onError) {
+            onError(error, {
+              type: 'send'
+            });
+          }
+        }
+      }
+
+      // 降级：使用 window.parent.postMessage（适用于 iframe 和 Web WebView）
+      if (!sent && window.parent && window.parent !== window) {
+        try {
+          window.parent.postMessage(messageToSend, '*');
+          loggerRef.current.debug('通过 window.parent.postMessage 发送成功');
+          sent = true;
+          return true;
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.warn('window.parent.postMessage 失败', error);
+          if (onError) {
+            onError(error, {
+              type: 'send'
+            });
+          }
+        }
+      }
+
+      // 最后尝试：直接使用 window.postMessage（某些特殊场景）
+      if (!sent && typeof window.postMessage === 'function') {
+        try {
+          // 注意：某些浏览器可能不支持直接调用 window.postMessage
+          // 这里仅作为最后的降级方案
+          window.postMessage(messageToSend, '*');
+          loggerRef.current.debug('通过 window.postMessage 发送成功');
+          sent = true;
+          return true;
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.warn('window.postMessage 失败', error);
+          if (onError) {
+            onError(error, {
+              type: 'send'
+            });
+          }
+        }
+      }
+      if (!sent) {
+        const error = new Error(`所有消息发送方式都失败，当前环境: ${environmentRef.current}`);
+        loggerRef.current.error(error.message);
+        if (onError) {
+          onError(error, {
+            type: 'send'
+          });
+        }
+        return false;
+      }
+      return true;
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      loggerRef.current.error('发送消息时发生未知错误', error);
+      if (onError) {
+        onError(error, {
+          type: 'send'
+        });
+      }
+      return false;
+    }
+  }, [generateMessageId, from, enableBase64, onError, convertToTapasSysFormat]);
+
+  // 消息处理函数
+  const handleMessage = (0, _react.useCallback)((rawMessage, eventOrigin) => {
+    try {
+      // Origin 验证（仅 iframe 环境）
+      if (environmentRef.current === 'iframe' && eventOrigin !== undefined) {
+        const isValidOrigin = validateOrigin(eventOrigin, allowedOrigins, strictOriginCheck, loggerRef.current);
+        if (!isValidOrigin) {
+          const error = new Error(`消息来源 ${eventOrigin} 验证失败`);
+          loggerRef.current.error(error.message);
+          if (onError) {
+            onError(error, {
+              type: 'origin'
+            });
+          }
+          return;
+        }
+      }
+      const normalizedMessage = normalizeMessage(rawMessage);
+      if (!normalizedMessage) {
+        loggerRef.current.warn('消息标准化失败，忽略消息');
+        return;
+      }
+
+      // 验证 from 字段
+      if (!validateFrom(normalizedMessage.from, allowedFrom, loggerRef.current)) {
+        loggerRef.current.warn('消息 from 字段验证失败，忽略消息');
+        return;
+      }
+
+      // 消息过滤器
+      if (messageFilter && !messageFilter(normalizedMessage)) {
+        loggerRef.current.debug('消息被过滤器拒绝，忽略消息');
+        return;
+      }
+      loggerRef.current.debug('处理消息:', normalizedMessage);
+
+      // 调用外部监听器
+      if (onMessage) {
+        try {
+          onMessage(normalizedMessage);
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.error('onMessage 回调执行错误', error);
+          if (onError) {
+            onError(error, {
+              type: 'receive'
+            });
+          }
+        }
+      }
+
+      // 调用注册的处理器
+      messageHandlersRef.current.forEach(handler => {
+        try {
+          handler(normalizedMessage);
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.error('消息处理器执行错误', error);
+          if (onError) {
+            onError(error, {
+              type: 'receive'
+            });
+          }
+        }
+      });
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      loggerRef.current.error('处理消息时发生未知错误', error);
+      if (onError) {
+        onError(error, {
+          type: 'receive'
+        });
+      }
+    }
+  }, [onMessage, normalizeMessage, allowedOrigins, strictOriginCheck, allowedFrom, messageFilter, onError]);
+
+  // 清理函数
+  const cleanup = (0, _react.useCallback)(() => {
+    loggerRef.current.debug('清理所有监听器和资源');
+    cleanupFunctionsRef.current.forEach(cleanupFn => {
+      try {
+        cleanupFn();
+      } catch (e) {
+        loggerRef.current.error('清理函数执行错误', e);
+      }
+    });
+    cleanupFunctionsRef.current = [];
+    messageHandlersRef.current.clear();
+  }, []);
+
+  // 注册消息监听
+  (0, _react.useEffect)(() => {
+    let cleanupFn;
+    if (environmentRef.current === 'iframe') {
+      // iframe 环境：监听 window message 事件
+      const messageHandler = event => {
+        // 传递 origin 用于验证
+        handleMessage(event, event.origin);
+      };
+      if (typeof window !== 'undefined') {
+        window.addEventListener('message', messageHandler);
+        cleanupFn = () => {
+          window.removeEventListener('message', messageHandler);
+        };
+      }
+    } else if (environmentRef.current === 'webview') {
+      // WebView 环境：监听消息
+      if (_reactNative.Platform.OS === 'web') {
+        // Web 环境下的 WebView：监听 window message
+        const messageHandler = event => {
+          handleMessage(event, event.origin);
+        };
+        if (typeof window !== 'undefined') {
+          window.addEventListener('message', messageHandler);
+          cleanupFn = () => {
+            window.removeEventListener('message', messageHandler);
+          };
+        }
+      } else {
+        // 原生环境：监听 React Native WebView 的消息
+        // 注意：在原生环境中，消息需要通过 WebView 组件的 onMessage prop 传递
+        // 这里我们提供一个通用的监听机制，通过全局事件总线
+        const messageHandler = event => {
+          handleMessage(event);
+        };
+
+        // 使用自定义事件系统（如果存在）
+        if (typeof global !== 'undefined' && global.__WebViewBridgeEventBus) {
+          const eventBus = global.__WebViewBridgeEventBus;
+          eventBus.on('message', messageHandler);
+          cleanupFn = () => {
+            eventBus.off('message', messageHandler);
+          };
+        } else if (typeof window !== 'undefined') {
+          // 降级：监听 window 事件（某些 WebView 实现可能支持）
+          const messageHandler = event => {
+            handleMessage(event, event.origin);
+          };
+          window.addEventListener('message', messageHandler);
+          cleanupFn = () => {
+            window.removeEventListener('message', messageHandler);
+          };
+        }
+      }
+    }
+    if (cleanupFn) {
+      cleanupFunctionsRef.current.push(cleanupFn);
+    }
+    return cleanupFn;
+  }, [handleMessage]);
+
+  // 发送初始化消息（在 window.onload 完成后自动发送）
+  (0, _react.useEffect)(() => {
+    if (autoInit && !initSentRef.current && from) {
+      const sendInitMessage = () => {
+        if (!initSentRef.current) {
+          sendMessage(initMessageType, initPayload);
+          initSentRef.current = true;
+        }
+      };
+
+      // 检查 window 是否已经加载完成
+      if (typeof window !== 'undefined') {
+        if (document.readyState === 'complete' || document.readyState === 'interactive') {
+          // 文档已经加载完成，使用 setTimeout 确保在下一个事件循环中执行
+          // 这样可以确保所有组件都已挂载完成
+          setTimeout(sendInitMessage, 0);
+        } else {
+          // 等待 window.onload 事件
+          const handleLoad = () => {
+            sendInitMessage();
+            window.removeEventListener('load', handleLoad);
+          };
+          window.addEventListener('load', handleLoad);
+
+          // 也监听 DOMContentLoaded 作为备选（某些情况下可能更快）
+          const handleDOMContentLoaded = () => {
+            // 延迟一点确保所有初始化完成
+            setTimeout(sendInitMessage, 10);
+            document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
+          };
+          if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
+          }
+          return () => {
+            window.removeEventListener('load', handleLoad);
+            document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
+          };
+        }
+      } else {
+        // 非 Web 环境（React Native），直接发送
+        setTimeout(sendInitMessage, 100);
+      }
+    }
+    return undefined;
+  }, [autoInit, initMessageType, initPayload, sendMessage, from]);
+
+  // 组件卸载时清理
+  (0, _react.useEffect)(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+
+  // 暴露方法给父组件
+  (0, _react.useImperativeHandle)(ref, () => ({
+    sendMessage,
+    getEnvironment: () => environmentRef.current,
+    cleanup
+  }), [sendMessage, cleanup]);
+
+  // 渲染占位 DOM（确保组件有实体）
+  if (!showPlaceholder) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, style],
+    testID: testID,
+    pointerEvents: "none"
+  });
+});
+WebViewBridge.displayName = 'WebViewBridge';
+
+/**
+ * 原生 WebView 消息注入辅助函数
+ * 在 WebView 的 injectedJavaScript 中使用，用于接收原生消息
+ */
+const createWebViewInjectedScript = () => {
+  return `
+    (function() {
+      // 创建全局事件总线（如果不存在）
+      if (typeof window.__WebViewBridgeEventBus === 'undefined') {
+        window.__WebViewBridgeEventBus = {
+          listeners: {},
+          on: function(event, handler) {
+            if (!this.listeners[event]) {
+              this.listeners[event] = [];
+            }
+            this.listeners[event].push(handler);
+          },
+          off: function(event, handler) {
+            if (this.listeners[event]) {
+              this.listeners[event] = this.listeners[event].filter(h => h !== handler);
+            }
+          },
+          emit: function(event, data) {
+            if (this.listeners[event]) {
+              this.listeners[event].forEach(handler => {
+                try {
+                  handler(data);
+                } catch (e) {
+                  console.error('WebViewBridge: 事件处理器错误', e);
+                }
+              });
+            }
+          }
+        };
+      }
+
+      // 监听 React Native WebView 的消息
+      if (window.ReactNativeWebView) {
+        window.document.addEventListener('message', function(event) {
+          if (window.__WebViewBridgeEventBus) {
+            window.__WebViewBridgeEventBus.emit('message', event);
+          }
+        });
+      }
+
+      // 监听 postMessage（备用方案）
+      window.addEventListener('message', function(event) {
+        if (window.__WebViewBridgeEventBus) {
+          window.__WebViewBridgeEventBus.emit('message', event);
+        }
+      });
+    })();
+    true; // 确保脚本返回 true
+  `;
+};
+
+/**
+ * 处理原生 WebView 消息
+ * 在 WebView 的 onMessage 回调中调用此函数
+ */
+exports.createWebViewInjectedScript = createWebViewInjectedScript;
+const handleNativeWebViewMessage = (event, onMessage) => {
+  try {
+    const data = event.nativeEvent?.data || event.data || event;
+    const message = typeof data === 'string' ? JSON.parse(data) : data;
+    onMessage(message);
+  } catch (e) {
+    console.error('WebViewBridge: 解析原生消息失败', e);
+  }
+};
+exports.handleNativeWebViewMessage = handleNativeWebViewMessage;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    width: 0,
+    height: 0,
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none'
+  }
+});
+var _default = exports.default = WebViewBridge;
+//# sourceMappingURL=WebViewBridge.js.map