React Native Webview重载时如何重新注入JavaScript？

核心思路 #

要实现WebView重载前后都能注入指定JS，关键是监听WebView的加载完成事件，每次页面加载（包括首次加载、刷新、跳转后重载）完成后调用注入方法。同时结合injectedJavaScript属性做初始注入，再用事件监听覆盖后续重载场景。

具体实现步骤 #

1. 定义可复用的注入代码
   把需要注入的特定函数抽成单独字符串，方便多次调用：

const injectedCode = `
  // 这里是你需要注入的自定义函数
  window.myCustomFunc = function() {
    console.log('自定义函数已注入');
    // 你的业务逻辑代码
  };
  // 可直接执行初始化逻辑
  myCustomFunc();
`;

2. 配置WebView组件并绑定监听事件
   利用onLoadEnd事件（页面加载完成后触发，包含重载场景），每次触发时调用injectJavaScript方法重新注入代码，同时通过injectedJavaScript完成首次注入：

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

const CustomWebView = () => {
  const webViewRef = useRef(null);

  // 统一处理JS注入的函数
  const injectCustomJS = () => {
    if (webViewRef.current) {
      webViewRef.current.injectJavaScript(injectedCode);
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://your-target-page.com' }}
      // 首次加载时注入代码
      injectedJavaScript={injectedCode}
      // 页面加载完成（含重载）后再次注入
      onLoadEnd={injectCustomJS}
      // 若需要在重载开始前也注入，可绑定onLoadStart事件
      // onLoadStart={injectCustomJS}
    />
  );
};

export default CustomWebView;

3. 处理特殊场景

• 当WebView内部页面跳转、用户手动刷新页面时，onLoadEnd会自动触发，确保JS被重新注入。
• 若要求重载前后都注入，同时绑定onLoadStart和onLoadEnd事件即可覆盖整个重载流程。
• 确保注入的JS是幂等的——多次执行不会引发逻辑冲突，比如函数定义采用覆盖式写法。

关键注意事项 #

• 必须正确获取WebView的引用webViewRef，避免调用injectJavaScript时出现空引用报错。
• 注入的JS代码要符合浏览器环境语法，避免语法错误导致注入失败。
• 不同版本的React Native WebView可能存在事件或方法差异，比如旧版本可借助onNavigationStateChange辅助判断页面重载状态，需根据实际版本调整。

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