从零到一：基于React Native的米家插件开发环境实战配置

1. 环境准备从零搭建React Native开发环境第一次接触米家插件开发时最让人头疼的就是环境配置。记得去年给宠物喂食器开发控制插件时光是让Node.js和npm正常运作就折腾了大半天。React Native环境就像乐高积木的基础板必须搭得平整稳固后续开发才不会东倒西歪。Node.js是地基建议安装LTS版本当前是18.x。有个坑要注意安装路径不要有中文或空格否则后期运行npm命令可能报错。安装完成后打开终端验证node -v npm -vAndroid开发环境需要Java JDK 11注意不是最新版。去年有个同事装了JDK 17结果gradle编译各种报错。安装后需要配置环境变量Windows用户要特别注意JAVA_HOME的路径不能包含Program Files的缩写Progra~1。React Native脚手架全局安装时有个小技巧使用淘宝镜像能避免网络问题npm install -g react-native-cli --registryhttps://registry.npmmirror.com提示如果之前安装过旧版本建议先执行npm uninstall -g react-native-cli清理。我就遇到过两个版本冲突导致create命令失效的情况。2. 获取米家SDK避开网络问题的实战技巧官方SDK仓库在GitHub的MiEcosystem组织下但直接克隆经常会卡住。去年开发智能窗帘项目时我发现用SSH协议比HTTPS更稳定git clone gitgithub.com:MiEcosystem/miot-plugin-sdk.git如果遇到权限拒绝试试这个曲线救国方案访问GitHub页面手动下载zip包解压后执行git init初始化本地仓库添加远程分支git remote add origin gitgithub.com:MiEcosystem/miot-plugin-sdk.git依赖安装环节最容易翻车。建议先配置淘宝镜像npm config set registry https://registry.npmmirror.com npm config set disturl https://npmmirror.com/dist然后进入miot-plugin-sdk目录执行npm install。如果卡在某个包不动可以按CtrlC中断单独安装卡住的包npm install 包名版本号重新运行npm install3. 创建第一个BLE设备项目创建项目时命名的玄学很多。去年给某客户开发时因为包名不符合规范调试时死活连不上设备。正确的命名格式应该是npm run create com.公司名.产品类型.型号 -type ble比如智能窗帘可以这样npm run create com.xiaomi.curtain.mtk1 -type ble模板选择有讲究empty完全空白项目适合老手common基础UI组件推荐新手ble蓝牙设备专用含设备连接管理wifiWi-Fi设备模板创建完成后别急着运行先检查projects目录下的项目结构├── index.js # 程序入口 ├── package.json # 依赖配置 ├── assets/ # 静态资源 └── components/ # 自定义组件4. 调试技巧从电脑到手机的完整链路调试环节最让人崩溃的就是设备已离线提示。经过多次踩坑我总结出稳定连接的秘诀手机端准备安装米家调试版APK建议v6.0.707以上登录开发者账号需提前在IoT平台注册进入我的→设置→连续点击MIUI版本号激活开发者模式电脑端操作npm start 项目名看到二维码输出后在手机开发者选项里添加调试Package项目名填写Model产品型号输入电脑IP需同局域网常见问题排查如果扫码没反应检查防火墙8081端口出现红屏错误npm start --reset-cache设备列表不刷新重启ADB服务注意调试BLE设备时记得开启手机定位权限这个坑让我浪费了两天时间查日志。5. 开发实战改造BLE设备模板官方demo的device.js里有宝藏。通过重写这些方法实现自定义功能class MyDevice extends Device { async connect() { // 改写连接逻辑 await this.startDiscovery(); this.emit(connected); } async feed(foodAmount) { // 宠物喂食器专属方法 return this.callAPI(set_food, { amount: foodAmount }); } }UI开发技巧使用米家封装好的组件import { MiButton, MiSlider } from miot/ui;样式适配技巧container: { flex: 1, paddingTop: Platform.OS ios ? 20 : 0 }设备状态管理DeviceEventEmitter.addListener(device_status_change, (data) { this.setState({ battery: data.batteryLevel }); });6. 发布前的终极校验清单提交审核前务必检查这些项[ ] package.json中的version是否递增[ ] 测试不同Android版本尤其关注Android 10的定位权限[ ] 移除所有console.log调试语句[ ] 验证低电量场景下的控制指令[ ] 检查多语言文案至少中英文打包命令也很关键npm run publish 项目名 -- --prod上传到小米IoT平台后建议先添加测试白名单。有个客户曾经直接上线结果因为GPS定位问题导致大面积故障。白名单测试期至少要覆盖3种不同品牌手机2种以上Android版本1台低配设备如红米Note系列7. 效能提升我的VSCode配置秘籍分享几个提升开发效率的配置调试配置.vscode/launch.json{ configurations: [ { name: Debug Android, request: launch, type: reactnative, platform: android } ] }必备插件React Native ToolsMIOT Extension SnippetsBLE Scanner蓝牙调试自定义代码片段{ MiOS Theme: { prefix: mi-theme, body: [ import { StyleSheet } from react-native;, import { MiTheme } from miot/resources;, , export default StyleSheet.create({, \tcontainer: {, \t\tbackgroundColor: MiTheme.colors.background, \t}, }); ] } }开发过程中多使用adb logcat查看原生日志。有次遇到BLE连接不稳定就是通过日志发现是手机厂商的省电策略导致的。