react-native-ble-manager组件的使用

最近几个月从h5转到RN的开发,其中遇到了很多坑,因为我们做的是物联网项目,然后又刚好用到了蓝牙组件,蓝牙组件我选择的是react-native-ble-manager,目前我已经跟硬件实现了通信,所以现在想简单写写蓝牙通信以及使用这个组件的的注意事项,本人才疏学浅,博客也写的比较少,不喜勿喷。实现这个ble蓝牙通信我很多是参照https://blog.csdn.net/withings/article/details/71378562这篇博客的,博主很强,写的很详细。

首先是配置,

蓝牙分传统蓝牙(经典蓝牙)和ble蓝牙(Bluetooth Low Energy:低功耗),而这个组件正是为ble蓝牙开发的。

蓝牙通信的完整流程为:初始化、搜索、连接、获取Service和Characteristic、通知监听、读数据、写数据。

 

 

### 关于 `react-native-ble-manager` 的安装、使用教程以及示例代码 #### 安装指南 为了在 React Native 应用程序中集成 `react-native-ble-manager`,需要按照特定步骤操作。首先,在命令行工具中执行如下 npm 命令来安装该库: ```bash npm install --save react-native-ble-manager ``` 对于 iOS 平台的支持,还需通过 CocoaPods 来处理依赖关系;而对于 Android,则要确保已正确设置权限并链接本地模块[^1]。 #### 初始化与配置 完成上述安装之后,需对项目做进一步初始化工作。这涉及到向应用程序注册原生模块,并监听来自蓝牙设备的消息事件。下面是一段 JavaScript 代码片段展示如何实例化 `BleManager` 对象并与之交互[^3]。 ```javascript import { NativeModules, Platform } from 'react-native'; const BleManagerModule = NativeModules.BleManager; let bleManagerEmitter; if (Platform.OS === 'ios') { bleManagerEmitter = new NativeEventEmitter(NativeModules.BleManager); } else if (Platform.OS === 'android') { // For newer versions of RN you may need to use RCTDeviceEventEmitter instead. bleManagerEmitter = new NativeEventEmitter(BleManagerModule); } ``` 这段代码展示了基于不同操作系统平台的选择性逻辑分支,以适配各自环境下的特性差异。 #### 使用教程概览 当一切准备就绪后,开发者可以利用所提供的 API 进行诸如扫描周边可用的 BLE 设备、连接目标外设等一系列操作。具体来说,可以通过调用相应的方法如 `start`, `scan`, 和 `connectToDevice` 等来进行实际的数据交换过程[^4]。 例如,启动 Bluetooth LE 扫描器可按以下方式编码实现: ```javascript await BleManager.start({ showAlert: false }); // Start scanning after a delay so the queue can process the start event first setTimeout(() => { console.log('Scanning...'); manager.scan([], 5, true).then((results) => { console.log('Scan finished'); }).catch(error => { console.error(`Error while scanning ${error}`); }); }, 1000); ``` 此部分提供了基本的操作流程指导,帮助初学者快速上手。 #### 示例代码解析 最后给出一段完整的例子用来说明怎样在一个简单的页面内运用这些功能。这里假设已经完成了前面提到的所有准备工作。 ```jsx import React, { useEffect, useState } from 'react'; import { View, Text, Button, Alert } from 'react-native'; import BleManager from 'react-native-ble-manager'; export default function App() { const [isBluetoothEnabled, setIsBluetoothEnabled] = useState(false); useEffect(() => { BleManager.start({ showAlert: false, }); const subscription = BleManager.onStateChange((state) => { if (state === 'PoweredOn') { setIsBluetoothEnabled(true); } }, true); return () => { subscription.remove(); }; }, []); async function handleStartScanPress() { try { await BleManager.enableBluetooth(); // Ensure bluetooth is enabled on device let devicesFound = []; BleManager.scan([], 5, true).subscribe( (device) => { devicesFound.push(device); console.log(`Discovered Device with ID: ${device.id}`); }, (error) => { console.warn(`Error during scan: ${JSON.stringify(error)}`); } ); } catch (e) { console.error(e.message); } } return ( <View style={{ flex: 1 }}> <Text>Is Bluetooth Enabled? {`${isBluetoothEnabled}`}</Text> <Button title="Start Scanning" onPress={handleStartScanPress}></Button> </View> ); } ``` 以上就是有关 `react-native-ble-manager` 的一些核心知识点介绍及其实践案例分享[^1].
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值