React Native Webview Bridge核心API详解：sendToBridge与onBridgeMessage使用指南

React Native Webview Bridge核心API详解：sendToBridge与onBridgeMessage使用指南

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

React Native Webview Bridge是一款强大的开源库，它为React Native应用提供了与WebView之间高效通信的能力。通过核心API sendToBridge 和 onBridgeMessage，开发者可以轻松实现React Native原生代码与WebView中JavaScript的双向数据传递，极大地扩展了混合应用的功能边界。

📚 核心API概览

React Native Webview Bridge的核心价值在于其简洁而强大的通信机制。两个核心API sendToBridge 和 onBridgeMessage 构成了通信的基础：

• sendToBridge：从React Native原生代码向WebView发送消息的方法
• onBridgeMessage：接收WebView发送到React Native的消息的回调函数

这对API的设计遵循了简单直观的原则，使得即使是React Native新手也能快速上手。

🔄 sendToBridge：原生向WebView发送消息

sendToBridge 方法允许React Native原生代码主动向WebView中的JavaScript发送消息。该方法定义在 webview-bridge/index.android.js 和 webview-bridge/index.ios.js 文件中，分别对应Android和iOS平台。

方法定义

sendToBridge: function (message: string) {
  UIManager.dispatchViewManagerCommand(
    this.getWebViewBridgeHandle(),
    UIManager.RCTWebViewBridge.Commands.sendToBridge,
    [message]
  );
}

使用场景

当需要从React Native端主动向WebView发送数据或指令时，如：

• 应用状态变化通知
• 用户操作传递
• 动态数据更新

示例代码

在 examples/SampleRN20/app.js 中可以看到实际应用：

onBridgeMessage: function (message) {
  const { webviewbridge } = this.refs;
  
  switch (message) {
    case "hello from webview":
      // 向WebView发送消息
      webviewbridge.sendToBridge("hello from react-native");
      break;
    // 其他消息处理...
  }
}

📥 onBridgeMessage：接收WebView消息

onBridgeMessage 是一个回调属性，用于接收从WebView发送到React Native的消息。当WebView中的JavaScript调用 WebViewBridge.send() 方法时，React Native端通过此回调接收消息。

方法定义

在组件的propTypes中定义：

propTypes: {
  // ...其他属性
  /**
   * Will be called once the message is being sent from webview
   */
  onBridgeMessage: PropTypes.func,
}

实现逻辑

在 webview-bridge/index.android.js 中，通过事件监听实现消息接收：

componentDidMount: function() {
  DeviceEventEmitter.addListener("webViewBridgeMessage", (body) => {
    const { onBridgeMessage } = this.props;
    const message = body.message;
    if (onBridgeMessage) {
      onBridgeMessage(message);
    }
  });
  // ...其他初始化代码
}

使用场景

处理WebView发送的各种事件和数据，如：

• 用户在WebView中的交互反馈
• WebView加载状态通知
• 网页中的数据提交

💻 完整使用示例

下面是一个完整的使用示例，展示了如何在React Native应用中集成WebView Bridge并使用这两个核心API：

1. 导入WebViewBridge组件

var WebViewBridge = require('react-native-webview-bridge');

2. 定义注入到WebView的JavaScript

const injectScript = `
  (function () {
    if (WebViewBridge) {
      // 监听来自React Native的消息
      WebViewBridge.onMessage = function (message) {
        if (message === "hello from react-native") {
          // 向React Native发送消息
          WebViewBridge.send("got the message inside webview");
        }
      };
      
      // 页面加载完成后发送初始消息
      WebViewBridge.send("hello from webview");
    }
  }());
`;

3. 在组件中使用WebViewBridge

render: function() {
  return (
    <View style={styles.container}>
      <WebViewBridge
        ref="webviewbridge"
        onBridgeMessage={this.onBridgeMessage}
        javaScriptEnabled={true}
        injectedJavaScript={injectScript}
        source={{uri: "https://google.com"}}/>
    </View>
  );
}

4. 实现消息处理函数

onBridgeMessage: function (message) {
  const { webviewbridge } = this.refs;
  
  switch (message) {
    case "hello from webview":
      // 接收到WebView消息后，发送回应
      webviewbridge.sendToBridge("hello from react-native");
      break;
    case "got the message inside webview":
      console.log("成功接收到WebView返回的消息！");
      break;
  }
}

🛠️ 项目配置与集成

要在您的React Native项目中使用WebView Bridge，需要正确配置项目依赖和原生代码。项目的目录结构如下：

主要文件包括：

• Android原生实现：android/src/main/java/com/github/alinz/reactnativewebviewbridge/
• iOS原生实现：ios/RCTWebViewBridge.h 和 ios/RCTWebViewBridge.m
• JavaScript接口：webview-bridge/index.android.js 和 webview-bridge/index.ios.js

安装步骤

1. 克隆仓库：

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

2. 按照项目文档配置Android和iOS原生项目，确保正确链接库文件。

⚙️ Xcode项目配置

对于iOS平台，需要在Xcode中正确配置项目依赖。在项目的Build Phases中，确保已添加必要的库：

📝 总结

React Native Webview Bridge通过 sendToBridge 和 onBridgeMessage 这对核心API，为React Native与WebView之间的通信提供了简单而强大的解决方案。无论是构建复杂的混合应用，还是简单的网页嵌入，这两个API都能满足您的需求，实现原生代码与Web内容的无缝集成。

通过本文介绍的使用方法和示例，您可以快速上手React Native Webview Bridge，为您的应用添加更丰富的功能和交互体验。

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