Skip to content

MrGaoGang/rn-jsbridge-ios

Repository files navigation

rn-jsbridge-ios

一个利用RCTBridgeModule实现react-native版本的jsbridge.

如何使用

  1. 拷贝 ios-> RNJSBridge 目录下的所有文件

  2. 在项目启动/调用 bridge 之前 注册 jsbridge

[[RNJSBridgeRegister shareInstance] registerJSBridge];

  1. 在 RNJSBridge->JSBridge 目录下编写自己的 jsbridge。

如何编写自定义 jsbrige

首先要清楚整个 jsbridge 的格式如下:

jsbridge://moduleName/methodName?params=value1&params2&value2
  • jsbridge 是按照 module 划分的,意味着我们需要在一个模块下编写对应的 bridge

  • 自定义 jsbridge需要继承JSBridgeCommonBase

  • 在编写 jsbridge 时,实现对应的方法需要注意,方法名称必须为evaluateJSBridge_你的方法名称,且入参为一个BridgeRequest对象

  • 如果有需要回调,可以在方法中调用evaluateJSCallback执行回调

上面讲述可能比较晦涩,下面拿一个具体的例子讲述; 假如我们要在react-native端使用

// 第一个参数app为模块名称,第二个参数为方法名称
callWithCallback('app', 'getAppInfo', {}, (data) => {
  this.setState({
    msg: JSON.stringify(data),
  });
});
// 或者
JSBridge.app.getAppInfo((data) => {});

的方式调用 jsbridge 获取系统信息;那么我们 ios 端应该如下:

  1. 创建一个文件JSBridgeAppPlugins并继承JSBridgeCommonBase
  2. 实现evaluateJSBridge_getAppInfo方法
    • 由于需要回调,我们可以在方法中调用evaluateJSCallback执行回调
// 一个样例,获取App的信息,使用callback返回
- (void)evaluateJSBridge_getAppInfo:(BridgeRequest *)request{
  NSString *deviceName = [[UIDevice currentDevice] name];
  NSString *sysVersion = [[UIDevice currentDevice] systemVersion];
  NSString *deviceUUID = [[[UIDevice currentDevice] identifierForVendor] UUIDString];
  // 执行js回调
  [self evaluateJSCallback:@{
    @"deviceName":deviceName,
    @"sysVersion":sysVersion,
    @"uuid":deviceUUID
  }withRequest:request];
}
  1. RNJSBridgeRegister注册自定义JSBridgeAppPlugins
// 注意app必须和上面是有的module名称相同
jsBridgePlugins = [[NSMutableDictionary alloc] initWithDictionary: @{
    @"app":[JSBridgeAppPlugins class]
  }];

如何实现