深度解析React Native Webview Bridge的JavaScript注入机制

React Native Webview Bridge是一个强大的工具，它为React Native应用提供了在WebView组件中实现JavaScript与原生代码双向通信的能力。通过JavaScript注入机制，开发者可以轻松实现React Native与WebView之间的数据传递和方法调用，极大地扩展了React Native应用的功能和灵活性。## 什么是JavaScript注入机制

尤翔昭Tess

615人浏览 · 2026-02-26 00:59:57

尤翔昭Tess · 2026-02-26 00:59:57 发布

深度解析React Native Webview Bridge的JavaScript注入机制

【免费下载链接】react-native-webview-bridge React Native Webview with Javascript Bridge 项目地址: https://gitcode.com/gh_mirrors/re/react-native-webview-bridge

什么是JavaScript注入机制？

JavaScript注入机制是React Native Webview Bridge的核心功能之一，它允许开发者在WebView加载网页时或加载后，向网页中注入自定义的JavaScript代码。这种机制使得React Native原生代码能够与WebView中的网页内容进行无缝交互，实现数据传递、事件监听和方法调用等功能。

JavaScript注入的工作原理

React Native Webview Bridge的JavaScript注入机制主要通过以下几个步骤实现：

注入时机：在WebView组件加载网页的过程中或加载完成后，通过特定的API将JavaScript代码注入到WebView中。
通信桥梁：注入的JavaScript代码会在WebView中创建一个通信桥梁，负责接收来自React Native原生代码的消息，并将WebView中的事件和数据发送回原生代码。
数据传递：通过这个通信桥梁，React Native和WebView可以实现双向的数据传递和方法调用。

核心实现文件解析

React Native Webview Bridge的JavaScript注入机制主要在以下文件中实现：

scripts/webviewbridge.js：这个文件包含了注入到WebView中的JavaScript代码，实现了WebView端的通信逻辑。
android/src/main/java/com/github/alinz/reactnativewebviewbridge/JavascriptBridge.java：Android平台的原生实现，负责处理JavaScript注入和通信。
ios/RCTWebViewBridge.m：iOS平台的原生实现，提供了与WebView的交互接口。

WebViewBridge对象详解

在scripts/webviewbridge.js文件中，定义了一个WebViewBridge对象，它是JavaScript注入机制的核心。这个对象提供了以下主要方法：

send(message)：用于向React Native原生代码发送消息。message参数必须是字符串类型。
onMessage：一个回调函数，当WebView接收到来自原生代码的消息时被调用。
onError：一个回调函数，当发生错误时被调用。

以下是WebViewBridge对象的核心实现代码：

var WebViewBridge = {
  __push__: function (message) {
    receiveQueue.push(message);
    setTimeout(function () {
      var message = receiveQueue.pop();
      callFunc(WebViewBridge.onMessage, message);
    }, 15);
  },
  __fetch__: function () {
    var messages = JSON.stringify(sendQueue);
    sendQueue = [];
    return messages;
  },
  send: function (message) {
    if ('string' !== typeof message) {
      callFunc(WebViewBridge.onError, "message is type '" + typeof message + "', and it needs to be string");
      return;
    }
    sendQueue.push(message);
    signalNative();
  },
  onMessage: null,
  onError: null
};

原生代码与WebView的通信流程

React Native Webview Bridge的JavaScript注入机制实现了原生代码与WebView之间的双向通信。下面我们来详细了解这个通信流程：

WebView向原生发送消息：
- WebView中的JavaScript调用WebViewBridge.send(message)方法发送消息。
- 消息被加入发送队列sendQueue。
- 调用signalNative()函数，通过修改window.location触发原生代码的事件监听。
- 原生代码调用__fetch__()方法获取消息队列，并进行处理。
原生向WebView发送消息：
- 原生代码调用__push__(message)方法将消息推送到WebView。
- 消息被加入接收队列receiveQueue。
- 通过setTimeout延迟调用onMessage回调函数，处理接收到的消息。

实际应用示例

下面是一个简单的示例，展示如何在React Native应用中使用WebView Bridge的JavaScript注入机制：

安装依赖：

git clone https://gitcode.com/gh_mirrors/re/react-native-webview-bridge
cd react-native-webview-bridge
npm install

在React Native中使用WebViewBridge：

import WebViewBridge from 'react-native-webview-bridge';

class MyWebView extends React.Component {
  onBridgeMessage(message) {
    console.log("Received message from WebView: " + message);
  }

  sendMessageToWebView() {
    this.webview.send("Hello from React Native!");
  }

  render() {
    return (
      <WebViewBridge
        ref={(webview) => { this.webview = webview; }}
        onMessage={this.onBridgeMessage.bind(this)}
        source={{ uri: 'https://example.com' }}
      />
    );
  }
}

在WebView中使用注入的JavaScript：

// 在网页中使用WebViewBridge
WebViewBridge.onMessage = function(message) {
  console.log("Received message from React Native: " + message);
  WebViewBridge.send("Hello from WebView!");
};