一：介绍
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
在React Native移动平台项目开发中，除了React Native 提供的封装好的部分插件和原声组建外，在实际的项目中还需要使用到很多其他的插件，比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能，都为IDE开发平台提供封装好的插件，以便项目开发使用。
另外，这些博文都是来源于我日常开发中的技术总结，在时间允许的情况下，我会针对技术点分别分享iOS、Android两个版本，如果有其他技术点需要，可在文章后留言，我会尽全力帮助大家。这篇文章重点介绍系统蓝牙插件的开发与使用
二：实现思路分析
系统蓝牙插件是通过调用系统 CoreBluetooth 蓝牙库实现蓝牙扫描、连接、发送数据等功能。并通过 BlueToothPlugin 类开放 BlueToothPlugin 接口提供给 H5页面端调用。
具体的实现思路如下：
-
新建 BlueToothPlugin 类，实现 RCTBridgeModule 协议
-
添加 RCT_EXPORT_MODULE() 宏
-
添加 React Native 跟控制器
-
声明被 JavaScript 调用的蓝牙初始化方法
-
声明被 JavaScript 调用的发送蓝牙数据方法
-
声明被 JavaScript 调用的断开蓝牙连接方法
-
实现判断蓝牙状态代理方法
-
实现蓝牙外设发现代理方法
-
实现外设服务特征的代理方法
-
实现写入蓝牙数据后回调的代理方法
-
Javascript调用浏览器方法
三：实现源码分析
实现源码分析是根据上面列出的具体实现思路来为大家解刨内部的实现流程及核心代码分析。
1. 新建 BlueToothPlugin 类，实现 RCTBridgeModule 协议
新建继承 NSObject 的 BlueToothPlugin 类，并实现 RCTBridgeModule 协议
// BlueToothPlugin.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import "RCTEventEmitter.h"
#import <CoreBluetooth/CoreBluetooth.h>
@interface BlueToothPlugin : RCTEventEmitter<RCTBridgeModule,CBCentralManagerDelegate, CBPeripheralDelegate>
@end
2. 添加 RCT_EXPORT_MODULE() 宏
为了实现 RCTBridgeModule 协议，BlueToothPlugin 的类需要包含RCT_EXPORT_MODULE() 宏。
并在这个宏里面添加一个参数“ BlueToothPlugin”用来指定在 JavaScript 中访问这个模块的名字。
如果你不指定，默认就会使用这个 Objective-C 类的名字。
如果类名以 RCT 开头，则 JavaScript 端引入的模块名会自动移除这个前缀。
// BlueToothPlugin.m
#import "BlueToothPlugin.h"
@implementation BlueToothPlugin
RCT_EXPORT_MODULE(BlueToothPlugin);
@end
3. 添加React Native跟控制器
如果不添加React Native跟控制器，view将不能正常显示出来，实现方法如下：
// BlueToothPlugin.m
#import <React/RCTUtils.h>
引入<React/RCTUtils.h>之后，在视图初始化或者显示的时候，按照如下方法调用即可
UIViewController *vc = RCTPresentedViewController();
4. 声明被 JavaScript 调用的蓝牙初始化方法
蓝牙初始化方法是对 CBCentralManager 的初始化以及代理调用线程设置，React Native需要明确的声明要给 JavaScript 导出的方法，否则 React Native 不会导出任何方法。下面通过举例来展示声明的方法，通过RCT_EXPORT_METHOD()宏来实现：
// ScanPlugin.m
#import "ScanPlugin.h"
#import <React/RCTUtils.h>
@implementation ScanPlugin
RCT_EXPORT_MODULE(ScanPlugin);
RCT_EXPORT_METHOD(initPeripheral:(NSDictionary *)arguments
withCompletionHandler:(RCTResponseSenderBlock)completion
failureHandler:(RCTResponseSenderBlock)failure)
{
NSLog(@"调起蓝牙初始化方法");
self.cMgr = [[CBCentralManager alloc] initWithDelegate:self queue:nil];
}
@end
5. 声明被 JavaScript 调用的发送蓝牙数据方法
发送蓝牙数据方法是在获取外设并连接成功之后调用，需要获取写入特征 characteristic，需要发送的数据，数据为 NSData 类型。
核心源码如下：
RCT_EXPORT_METHOD(sendData:(NSDictionary *)arguments
withCompletionHandler:(RCTResponseSenderBlock)completion
failureHandler:(RCTResponseSenderBlock)failure)
{
NSLog(@"调起蓝牙发送数据方法");
NSData *data = [self p_dataWithString:arguments[@"data"]];
if (self.characteristic) {
[self.peripheral writeValue:data forCharacteristic:self.characteristic type:CBCharacteristicWriteWithResponse];
}
}
6. 声明被 JavaScript 调用的断开蓝牙连接方法
当连接的设备蓝牙连接成功后如果想主动断开连接，需要调用 cancelPeripheralConnection 方法来实现，传参需要断开设备的 peripheral 。
React Native需要明确的声明要给 JavaScript 导出的方法，否则 React Native 不会导出任何方法。代码如下：
RCT_EXPORT_METHOD(disconnectBlueTooth:(RCTResponseSenderBlock)completion
failureHandler:(RCTResponseSenderBlock)failure)
{
NSLog(@"调起断开蓝牙连接方法");
[self.cMgr cancelPeripheralConnection:self.peripheral];
}
7. 实现判断蓝牙状态代理方法
蓝牙状态获取需要通过实现代理，在 CBCentralManager 初始化时会触发代理方法，并且只有获取到蓝牙的状态才可以进行蓝牙连接，否则提前连接无效。
源码如下：
- (void)centralManagerDidUpdateState:(CBCentralManager *)central
{
switch (central.state) {
case CBManagerStateUnknown:{
NSLog(@"未知状态");
}
break;
case CBManagerStateResetting:
{
NSLog(@"重置状态");
}
break;
case CBManagerStateUnsupported:
{
NSLog(@"不支持的状态");
}
break;
case CBManagerStateUnauthorized:
{
NSLog(@"未授权的状态");
}
break;
case CBManagerStatePoweredOff:
{
NSLog(@"关闭状态");
}
break;
case CBManagerStatePoweredOn:
{
NSLog(@"开启状态－可用状态");
[self.centralManager scanForPeripheralsWithServices:nil options:nil];
}
break;
default:
break;
}
}
8. 实现蓝牙外设发现代理方法
在发起蓝牙扫面之后，如果扫面到设备会在 didDiscoverPeripheral 代理方法中回调相关设备数据，其中包括，中心管理者 central、外设 peripheral、设备自定义数据 advertisementData、RSSI 信号强度。
核心源码如下：
- (void)centralManager:(CBCentralManager *)central // 中心管理者
didDiscoverPeripheral:(CBPeripheral *)peripheral // 外设
advertisementData:(NSDictionary *)advertisementData // 外设携带的数据
RSSI:(NSNumber *)RSSI // 外设发出的蓝牙信号强度
{
}
- 实现外设服务特征的代理方法
实现外设服务特征，这个是比较重要的方法，你在这里可以通过事先知道UUID找到你需要的特征，订阅特征，或者这里写入数据给特征也可以。源码如下：
- (void)peripheral:(CBPeripheral *)peripheral didDiscoverCharacteristicsForService:(CBService *)service error:(NSError *)error
{
// 遍历所有的特征
for (CBCharacteristic *characteristic in service.characteristics)
{
NSLog(@"特征值:%@",characteristic.UUID.UUIDString);
}
}
- 实现写入蓝牙数据后回调的代理方法
在写入数据成功之后，会通过 didWriteValueForCharacteristic 方法回调告诉我们数据发送成功，可以在该方法中进行下一步操作。源码如下：
- (void)peripheral:(CBPeripheral*)peripheral didWriteValueForCharacteristic:(CBCharacteristic *)characteristic error:(NSError *)error{
}
11. Javascript调用浏览器方法
现在从 Javascript 里可以这样调用这个方法：
import { NativeModules } from "react-native";
const BlueToothPlugin = NativeModules.BlueToothPlugin;
BlueToothPlugin.initPeripheral({"peripheralName": "", "peripheralServiceID": "", "peripheralCharacteristicID": ""}, (msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
BlueToothPlugin.sendData({"data": ""}, (msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
BlueToothPlugin.disconnectBlueTooth((msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
网友评论