接入涂鸦UI组件

1 涂鸦官方参考文档

https://developer.tuya.com/cn/docs/iot/preface?id=K9m1fn6ycetd0

1.1 涂鸦面板开发流程

步骤一：搭建环境

1. 安装开发工具：Visual Studio Code。
2. 安装 NVM ：可以对node.js版本进行管理，安装好NVM后，输入 nvm install 10.22.0 安装 Node.js 10.22.0版本，不然打包上传可能出现错误。
3. 安装 Yarn：输入npm install -g yarn，安装 Yarn，通过yarn start运行项目。
4. 安装 Homebrew 及 Watchman：本步骤仅针对 macOS 系统。
5. 常见问题

步骤二：创建产品

1. 选择产品品类
2. 选择开发方式
3. 完善产品基本信息
4. 定义产品功能
5. 选择设备面板

步骤三：初始化工程

1. 前提条件 ：完成 环境搭建，完成 产品创建。
2. 安装命令行工具（CLI）
3. 初始化模板工程
4. 更新 tuya-panel-cli：更新 tuya-panel-cli，确保为最新版本，不然打包上传可能出现错误。

步骤四：开发调试

1. 前提条件：完成前面步骤。
2. 操作步骤：
3. 扫描 涂鸦面板-RN 二维码，下载并安装 涂鸦面板-RN。
4. 配置调试工具。

• 登录 com.ty.panel.dev 。说明： 安装 涂鸦面板-RN 时会同时安装 com.ty.panel.dev。
• 输入开发主机的 IP 地址，点击 确认。如果使用手机进行预览，需要手机与电脑连接在同一个网络
• 单击 开启 RN 调试模式，开启调试。

c. 调试面板

• 注册并登录 涂鸦面板-RN。
• 扫描已创建产品面板的二维码，添加虚拟设备。虚拟设备二维码获取方法参见选择面板。
• 在 涂鸦面板-RN ，点击登录指定面板界面。
• 摇动手机，在弹框选择 Reload，载入本地资源包。

步骤五：打包上传

1. 前提条件：

• 完成 开发调试
• 已自行完成产品开发

1. 操作步骤：
2. 生成 UI 包：使用 tuya-panel-cli package ./ 命令打包项目，如果node.js版本不对，打包会出现问题
3. 上传 UI 包：

• 登录 涂鸦 IoT 平台。
• 点击产品开发，选择之前创建的产品，点击继续开发。
• 在 设备面板 页面选择 更换面板>SDK 开发面板>创建 SDK 面板。
• 在上传 UI 包区域，选择本地已打包的 UI 包。

c. 体验预览：上传完成后，页面右侧将生成体验二维码。您可以通过设置面板测试账号将涂鸦智能 App 的用户账号设置为测试账号，方便用户扫描体验二维码快速体验 UI 资源包。
d. 正式发布：体验无误后，点击发布上线功能，您即可将该 UI 包发布上线。上线后，页面下方生成最新一条的 UI 资源包上线记录，便于您实时体验线上版本。

1.2 涂鸦面板api

原生方法

设备信息获取

设备相关

Device 方法

Mobile 方法

1.3基础组件

1. Button 按钮
2. Popup 弹出层
3. Slider 滑动选择器
4. SwitchButton 开关
5. TYText 文字
6. Tips 气泡组件
7. Progress 进度条

2 面板具体开发流程

2.1 下载工具包

下载：
$ npm install tuya-panel-kit

2.2 编写样例程序

2.2.1 页面主体框架

/**
涂鸦经典照明模板。
 */
 //引用工具包
import React from 'react';
import { View, StyleSheet, Image } from 'react-native';
import { Utils,TYSdk } from 'tuya-panel-kit';
import Res from '../../res';
//使用自适应宽高cx
const { convertX: cx } = Utils.RatioUtils;
//页面主体
const Home: React.FC = () => {
  return (
    <View style={{ flex: 1 }}>
      <View style={styles.content}>
          <Image style={styles.image} source={Res.themeImage} resizeMode="contain" />
      </View>
     <HomeBottomView /> 
    </View>
  );
};
//页面样式
const styles = StyleSheet.create({
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: cx(200),
    height: cx(200),
    opacity: 0.8,
  },
});
export default Home;

2.2.2 获取-更新设备状态样例

import React from 'react';
import {TYSdk,} from 'tuya-panel-kit';
const Home: React.FC = () => {
  // 获取设备信息
  const aa = TYSdk.devInfo;获取设备的信息
  let statedata = aa.state;DP 的状态
  //存储设备的状态信息到list
    let list = {
    switch_led_1: !!statedata.switch_led_1,dp状态
    switch_led_2: !!statedata.switch_led_2,
    switch_backlight: !!statedata.switch_backlight,背光状态
    bright_value_1: Number(statedata.bright_value_1),亮度
    bright_value_2: Number(statedata.bright_value_2),
    brightness_max_1: Number(statedata.brightness_max_1),最大亮度
    brightness_max_2: Number(statedata.brightness_max_2),
    brightness_min_1: Number(statedata.brightness_min_1),最小亮度
    brightness_min_2: Number(statedata.brightness_min_2),
  };
    // 更改dp 点状态
  const swiValue = v => {
   //接到组件传过来的，执行下发命令
    TYSdk.device.putDeviceData({
      switch_led_1: v,更改dp状态为所传递的值
    });
  };//执行完会重新渲染页面
   return (
    {/* 开关按钮 */}
          <SwitchButton
            style={styles.content}
            value={list.switch_led_1}默认值
            onValueChange={v => swiValue(v)}//传递改变后的值
            tintColor="#E5E5E5"
            onTintColor={{
              '0%': '#ade3ec',
              '100%': '#ade3ec',
            }}
          />
     );
};
//页面样式
const styles = StyleSheet.create({
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
export default Home;

获取设备信息返回

以下为常用字段的介绍，如需查看更全面的信息请查看 DevInfo type 定义。

• name：设备名称
• productId：产品 ID
• uiId：当前产品对应的面板 ID
• bv：硬件基线版本
• devId：设备 ID
• gwId：网关 ID。如果是单品，devId 一般和 gwId 相等
• appOnline：App 是否在线
• deviceOnline：设备是否在线
• isLocalOnline：局域网是否在线
• isShare：是否是共享设备
• groupId：群组设备 ID，用于判断是否为群组设备
• networkType：设备的在线类型
• schema：设备所属产品的功能点(dp，data point)定义，功能点解释请看 DP 解释
• state：DP 的状态
• capability：设备的能力类型。表示设备所支持的服务，例如支持 Zigbee，红外，蓝牙等

下发的 dp 点状态

3 项目注意事项

3.1 设备名称更改导致项目无法打包

更改设备名称需要引入tuya-panel-api工具包，当项目打包开始的时候，开发工具会将tuya-panel-api工具包删除，但是由于代码中引入了该工具包，导致开发工具打包过程中找不到该工具包，使得打包项目出现错误。

3.2 亮度条滑动更新

亮度条滑动更新使用了 useState钩子函数，传递参数才可以触发，然后渲染页面。需要添加监听器，监听数据上报并传递给useState钩子。