当前位置：首页 > news >正文

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

news 2026/7/16 3:04:28

1. 环境准备：从零搭建React Native开发环境

第一次接触米家插件开发时，最让人头疼的就是环境配置。记得去年给宠物喂食器开发控制插件时，光是让Node.js和npm正常运作就折腾了大半天。React Native环境就像乐高积木的基础板，必须搭得平整稳固，后续开发才不会东倒西歪。

Node.js是地基，建议安装LTS版本（当前是18.x）。有个坑要注意：安装路径不要有中文或空格，否则后期运行npm命令可能报错。安装完成后打开终端验证：

node -v npm -v

Android开发环境需要Java JDK 11（注意不是最新版！）。去年有个同事装了JDK 17，结果gradle编译各种报错。安装后需要配置环境变量，Windows用户要特别注意JAVA_HOME的路径不能包含Program Files的缩写"Progra~1"。

React Native脚手架全局安装时有个小技巧：使用淘宝镜像能避免网络问题

npm install -g react-native-cli --registry=https://registry.npmmirror.com

提示：如果之前安装过旧版本，建议先执行npm uninstall -g react-native-cli清理。我就遇到过两个版本冲突导致create命令失效的情况。

2. 获取米家SDK：避开网络问题的实战技巧

官方SDK仓库在GitHub的MiEcosystem组织下，但直接克隆经常会卡住。去年开发智能窗帘项目时，我发现用SSH协议比HTTPS更稳定：

git clone git@github.com:MiEcosystem/miot-plugin-sdk.git

如果遇到权限拒绝，试试这个曲线救国方案：

访问GitHub页面手动下载zip包
解压后执行git init初始化本地仓库
添加远程分支git remote add origin git@github.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。如果卡在某个包不动，可以：

按Ctrl+C中断
单独安装卡住的包npm install 包名@版本号
重新运行npm install

3. 创建第一个BLE设备项目

创建项目时命名的玄学很多。去年给某客户开发时，因为包名不符合规范，调试时死活连不上设备。正确的命名格式应该是：

npm run create com.公司名.产品类型.型号 -type ble

比如智能窗帘可以这样：

npm run create com.xiaomi.curtain.mtk1 -type ble

模板选择有讲究：

empty：完全空白项目（适合老手）
common：基础UI组件（推荐新手）
ble：蓝牙设备专用（含设备连接管理）
wifi：Wi-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 Tools
MIOT Extension Snippets
BLE 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连接不稳定，就是通过日志发现是手机厂商的省电策略导致的。

查看全文

http://www.jsqmd.com/news/1197572/