React Native是一种基于React的JS框架，它可以让你使用JavaScript和React的开发方式来构建iOS和Android的原生应用。这些原生应用实际上是通过React Native桥接（Bridge）在JavaScript和iOS/Android平台之间进行通信和交互的。
React Native桥接（Bridge）是一种在JavaScript和iOS/Android原生代码之间使用的桥接技术。它的原理是通过Native Module和JavaScript Module之间的相互调用来实现Native与JavaScript之间的通信和交互。
每个React Native应用都有一个JavaScript环境和一个宿主环境（iOS或Android平台）。JavaScript代码运行在JavaScript环境中，宿主环境则运行原生的iOS或Android代码。桥接技术则起到了连接和沟通这两个环境之间的作用。
Native Module是一种可以被JavaScript端调用的原生组件。React Native提供了一些默认的Native Module（比如Image、TextInput等），同时也可以自定义Native Module来满足个性化需求。在iOS和Android平台中，Native Module通常是用Objective-C/Swift或Java来实现的。
JavaScript Module则是一种可以被Native端调用的JavaScript组件。React Native应用中的大多数代码都是JavaScript代码，而JavaScript Module是构建这些代码的基础。JavaScript Module使用ES6的语法来定义，然后通过ES6的export关键字进行导出。
Native Module和JavaScript Module的交互是通过React Native桥接（Bridge）实现的。JavaScript端可以使用RCTBridgeModule和RCTXXXEventEmitter（比如RCTDeviceEventEmitter）等类来与Native端进行交互。而Native端则可以使用RCTExportModule和RCTEventDispatcher等类来与JavaScript端进行交互。
在Native和JavaScript之间的通信中，有同步和异步两种通信方式。
同步通信是指Native端和JavaScript端在执行过程中会相互阻塞，直到通信完成之后才会继续执行。这种方式通常用于Native Module返回结果给JavaScript端使用。
异步通信则是指Native端和JavaScript端可以在执行的同时进行通信。通信完成之后，Native端通常会通过回调函数等方式将结果返回给JavaScript端。
一般来说，我们应该尽量避免使用同步通信方式，因为它会严重影响应用的性能和响应速度。
下面我们来看一个实际的例子，演示如何在Native Module中调用JavaScript Module。
首先我们需要定义一个Native Module（这里以iOS为例）：
#import "RCTBridgeModule.h"
@interface MyNativeModule : NSObject <RCTBridgeModule>
@end
@implementation MyNativeModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(callJavaScriptModule:(NSString *)name params:(NSDictionary *)params) {
RCTLogInfo(@"Calling JavaScript Module with name %@ and params %@", name, params);
}
@end
在这个Native Module中，我们定义了一个名为callJavaScriptModule的方法，在这个方法中，我们打印出调用信息，然后调用JavaScript Module中的一个方法。
然后我们在JavaScript Module中定义一个方法：
const MyJavaScriptModule = {
sayHello: function() {
console.log('Hello from JavaScript Module!');
},
};
export default MyJavaScriptModule;
这个方法可以通过Native Module中的callJavaScriptModule方法进行调用：
- (void)callMyJavaScriptModule {
[_bridge.eventDispatcher sendAppEventWithName:@"MyEvent" body:@{@"name": @"MyJavaScriptModule", @"method": @"sayHello"}];
}
在这个代码中，我们通过_bridge.eventDispatcher访问RCTEventDispatcher实例，然后调用sendAppEventWithName方法发射一个事件（即名称为MyEvent的事件）到JavaScript模块。这个事件包含两个参数：name和method，表示被调用的JavaScript模块的名称和方法名。
我们可以在JavaScript模块中监听这个事件，并做出相应的处理：
import {DeviceEventEmitter} from 'react-native';
import MyJavaScriptModule from '../modules/MyJavaScriptModule';
DeviceEventEmitter.addListener('MyEvent', (event) => {
if (event.name === 'MyJavaScriptModule' && event.method === 'sayHello') {
MyJavaScriptModule.sayHello();
}
});
在这个代码中，我们使用DeviceEventEmitter监听事件（名称为MyEvent），并在事件响应函数中判断事件的参数，如果符合条件（即当事件名称为MyJavaScriptModule，且方法名为sayHello时），就调用sayHello方法。
下面我们来看另一个实际的例子，演示如何在JavaScript Module中调用Native Module。
首先我们需要在JavaScript Module中调用Native Module的方法：
import {NativeModules} from 'react-native';
NativeModules.MyNativeModule.callNativeMethod('Hello', (result) => {
console.log(result);
});
在这个代码中，我们先使用NativeModules模块从全局React Native变量中获取一个名为MyNativeModule的Native Module。然后我们调用它的callNativeMethod方法，并传入一个名为Hello的参数。
callNativeMethod方法是一个异步的方法，它的第二个参数是一个回调函数，当调用成功并返回结果时，回调函数会被执行，将结果作为参数传入。
然后我们再来看一下在Native Module中实现callNativeMethod方法的代码：
#import "RCTBridgeModule.h"
@interface MyNativeModule : NSObject <RCTBridgeModule>
@property (nonatomic, copy) RCTPromiseResolveBlock resolve;
@property (nonatomic, copy) RCTPromiseRejectBlock reject;
@end
@implementation MyNativeModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(callNativeMethod:(NSString *)param resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
self.resolve = resolve;
self.reject = reject;
RCTLogInfo(@"Calling Native Method with param %@", param);
}
- (void)callbackWithResult:(NSString *)result {
self.resolve(result);
}
@end
在这个Native Module中，我们定义了一个callNativeMethod方法，这个方法用于响应来自JavaScript Module的调用。在这个方法中，我们将传入的参数打印出来，并将resolve和reject两个回调函数保存下来。resolve回调函数在调用成功时被调用，reject回调函数在调用失败时被调用。
此外，我们还定义了一个callbackWithResult方法，它用于在Native端完成处理后将结果返回给JavaScript端。
我们需要调用这个方法的实际业务代码放在RCT_EXPORT_METHOD(callNativeMethod:(NSString *)param resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)函数里面，并在完成异步处理后主动调用callbackWithResult函数返回处理结果。
//---------------------------------------------------
// 业务处理代码
//---------------------------------------------------
- (void)doSomethingAsync:(NSString *)param {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
// 模拟一个异步操作
[NSThread sleepForTimeInterval:1.0f];
NSString *result = [NSString stringWithFormat:@"Result from Native, param=%@", param];
// 完成异步处理后回调
[self callbackWithResult:result];
});
}
这个异步处理在Real Native中实际为异步操作，用这种方式能保证RN与Native互相不阻塞。
React Native桥接（Bridge）是React Native应用中Native端和JavaScript端之间通信的关键。了解React Native桥接的机制，有助于我们更好地理解React Native应用的内部工作原理，同时也有助于我们更好地定位问题和解决问题。
本文链接：http://task.lmcjl.com/news/9537.html