移动端JavaScript_React Native桥接-js教程-PHP中文网

移动端JavaScript_React Native桥接

夜晨

发布： 2025-11-19 19:42:59

原创

956人浏览过

React Native通过桥接机制实现JavaScript与原生通信，核心为双线程异步传输JSON消息。JS调用原生模块需注册并序列化请求，原生执行后通过回调或事件通知JS。传统桥接存在性能开销，新架构引入TurboModules实现按需加载、Fabric优化UI更新，并未来支持JSI直接引用原生对象，减少序列化延迟。掌握该机制有助于提升应用性能与稳定性。

移动端javascript_react native桥接

React Native 能够让开发者用 JavaScript 编写接近原生性能的移动应用，核心在于其 JavaScript 与原生之间的通信机制——也就是“桥接”（Bridge）。这个桥接系统使得 JS 代码可以调用原生模块，原生代码也能向 JS 发送事件和数据。

JavaScript 与原生通信的基本原理

React Native 的架构采用双线程模型：JavaScript 运行在独立的 JS 线程中，而 UI 和平台功能则由原生主线程处理。两者通过一个称为“Bridge”的异步通信通道进行交互。

所有跨线通信都以序列化的 JSON 消息形式传递。当 JS 调用一个原生模块方法时，消息会被打包并通过桥发送到原生端；原生收到后执行对应逻辑，必要时再回调 JS。

通信是异步的，避免阻塞 JS 线程或 UI 线程
调用过程涉及序列化和反序列化，有一定性能开销
每个原生模块需在启动时注册，供 JS 动态发现和调用

原生模块暴露给 JavaScript

要在 JS 中使用原生功能，必须创建原生模块并正确导出。以 Android 为例：

立即学习“Java免费学习笔记（深入）”；

public class ToastModule extends ReactContextBaseJavaModule {
  @Override
  public String getName() {
    return "Toast";
  }

  @ReactMethod
  public void show(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
  }
}

在 iOS 上使用 Objective-C 或 Swift 实现类似逻辑，通过 RCT_EXPORT_MODULE 和 RCT_EXPORT_METHOD 导出。

JS 端通过 NativeModules 访问：

多个微信小程序源码合集

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加

查看详情

import {NativeModules} from 'react-native';
const {Toast} = NativeModules;
Toast.show('Hello', 1000);

回调与事件通信

原生执行完任务后常需要通知 JS。React Native 提供了两种主要方式：

Callback：一次性回调函数，适合完成通知或返回简单结果
EventEmitter：通过 DeviceEventEmitter 或 NativeEventEmitter 发送持续事件，如传感器数据、推送通知等

例如，原生端发送事件：

WritableMap event = Arguments.createMap();
event.putString("msg", "data from native");
getReactContext()
.getJSModule(DeviceEventEmitter.class)
.emit("onUpdate", event);

JS 端监听：

DeviceEventEmitter.addListener('onUpdate', (e) => console.log(e.msg));