React Native WebView大型多模块项目中直接访问变量与函数的方法

1. 给目标模块暴露专属全局命名空间 #

如果网页脚本是模块化的（比如ES模块、CommonJS），可以让模块主动把需要外部调用的函数挂载到唯一的全局命名空间下，避免和其他模块冲突：

// 网页中的模块脚本
const customerModule = {
  toggle() {
    let customerType = (customerType === "Public") ? "Private" : "Public";
    document.getElementById("h1_element").innerText = customerType;
  },
  getCustomerType() { return customerType; }
};

// 挂载到全局，用项目/模块专属名称做命名空间
window.MyAppCustomerModule = customerModule;

React Native中直接调用：

viewRef.current.injectJavaScript('window.MyAppCustomerModule.toggle()');

2. 通过自执行函数精准定位作用域 #

如果无法修改网页模块代码，可以在注入脚本时，用自执行函数包裹逻辑，根据网页的作用链精准找到目标函数：

// 假设toggle函数在某个IIFE内部，通过作用链获取
viewRef.current.injectJavaScript(`
  (function() {
    // 根据网页脚本结构，定位到目标函数的作用域
    const targetToggle = /* 从网页作用域中获取目标函数的逻辑 */;
    targetToggle();
  })()
`);

这种方式需要了解网页脚本的结构，但无需修改网页代码。

3. 用postMessage双向通信（更规范的解耦方式） #

在网页中监听React Native的消息，根据消息指令执行对应函数，这种方式无需暴露全局函数，耦合度更低：

网页端代码：

// 网页添加消息监听
window.addEventListener('message', (event) => {
  // 可选：验证消息来源增强安全性
  if (event.source !== window) return;
  
  const { action } = event.data;
  switch(action) {
    case 'toggleCustomer':
      toggle();
      window.ReactNativeWebView.postMessage(customerType);
      break;
    case 'getCustomerType':
      window.ReactNativeWebView.postMessage(customerType);
      break;
  }
});

React Native端代码：

// 发送指令代替直接调用函数
const toggleCustomer = () => {
  viewRef.current.postMessage(JSON.stringify({ action: 'toggleCustomer' }));
};

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