使用react-native-webview注入React应用遇阻，求解决方案

背景 #

我正在使用Expo开发React Native应用，目标是通过react-native-webview将一个已构建的React应用注入到第三方网站中运行。

环境 #

• iOS（iPhone 15 Pro模拟器）

已完成操作 #

• 成功注入简单JS代码（如alert('something')）；
• 成功向网站注入带文本的div元素。

遇到的问题 #

只要注入涉及react-dom方法的代码，整个注入逻辑就会失效（包括此前正常运行的alert代码）。尝试用try catch包裹代码也无法捕获错误，疑似打包时包含react-dom模块就会触发问题。以下代码执行均无效：

rootElement.innerHTML = renderToString(<div>Hello 123</div>); // does not work
root = createRoot(rootElement); // also does not work

提问 #

是否有人遇到过类似情况？该如何解决？我会继续排查原因，但希望先得到社区的解答，谢谢！

解决方案 #

1. 先注入React和ReactDOM到第三方网站 #

第三方网站环境默认没有React和ReactDOM全局变量，直接运行依赖它们的代码会导致脚本报错阻塞。可以先通过CDN注入这两个库，等待加载完成后再执行渲染逻辑：

const injectScript = `
  // 创建并注入React、ReactDOM脚本
  const reactScript = document.createElement('script');
  reactScript.src = 'https://unpkg.com/react@18/umd/react.production.min.js';
  const reactDomScript = document.createElement('script');
  reactDomScript.src = 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js';
  
  document.head.appendChild(reactScript);
  document.head.appendChild(reactDomScript);
  
  // 等待脚本加载完成
  Promise.all([
    new Promise(resolve => reactScript.onload = resolve),
    new Promise(resolve => reactDomScript.onload = resolve)
  ]).then(() => {
    // 创建挂载容器并渲染React内容
    const rootEl = document.createElement('div');
    document.body.appendChild(rootEl);
    const root = ReactDOM.createRoot(rootEl);
    root.render(React.createElement('div', null, 'Hello 123'));
  });
`;
// 将injectScript传入WebView的injectJavaScript属性

2. 打包时排除React/ReactDOM #

如果是打包后注入React代码，需在打包工具（如Webpack/Rollup）中把react和react-dom设为外部依赖，避免将它们打包进注入脚本，防止和第三方网站的环境冲突：

• Webpack配置示例：

module.exports = {
  // ...其他配置
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

3. 调整脚本注入时机 #

确保在第三方网站完全加载后再注入脚本，使用react-native-webview的onLoadEnd回调触发注入，而非onLoadStart，避免DOM未就绪导致的错误。

4. 开启WebView调试排查错误 #

在WebView组件中开启javaScriptEnabled={true}和domStorageEnabled={true}，然后通过Safari开发者工具连接模拟器的WebView，查看Console面板的具体错误信息，这比try catch更易定位问题。

内容的提问来源于stack exchange，提问作者Thịnh Phạm