情景库

更新时间:2022-04-08 13:43:54下载pdf

情景库方法,包含三个情景的 API 及 useSceneData 方法。

情景库 API

getSceneVersionInfo

获取当前情景库版本及版本集合。

入参

出参

参数 说明
ISceneInfo{} 返回一个 ISceneInfo 类型的数据
interface ISceneInfo {
  currVersion: string; //‘1.0’
  allVersionList: string[];//['1.0','1.1']
}

getSceneData

获取情景资源。

入参

参数类型 说明
string 升级的情景库版本号

返回的数据类型

出参类型 说明
ISceneData[] 返回一个 ISceneData 类型的数据
interface ISceneData {
  dpCode: string;
  icon: string;
  sceneName: string;
  sceneData: string;
  sceneId: number;
  gmtCreate?: number;
  gmtModified?: number;
}

updateVersion

更新情景库版本。

入参

参数类型 说明
string 升级的情景库版本号

返回的数据类型

出参类型 说明
boolean
  • 成功:true
  • 失败:false

情景库 useSceneData

useSceneData 是个自定义的 hooks 方法,用于情景库升级及获取新版本情景库的数据。

Params

参数 说明 类型
v 必填项 初始情景库版本

Result

参数 说明 类型
data 情景数据 ISceneData[]
currentVersion 情景库的版本 string
actions 操作集合 Actions

Actions

参数 说明 类型
renderUpdateScene 升级情景库版本并获取新的情景库数据 (v:string)=>void

接口

const [data, currentVersion, { renderUpdateScene }] = useSceneData('1.0');

示例

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
import { lampApi } from '@tuya/tuya-panel-api';
import { Hooks } from '@tuya/tuya-panel-lamp-sdk';
import { Utils, TYText } from 'tuya-panel-kit';
import { useUpdateEffect } from 'ahooks';

const { getSceneData, getSceneVersionInfo } = lampApi.sceneApi;
const { useSceneData } = Hooks;

const { winWidth, convertX: cx } = Utils.RatioUtils;

const SceneFunScene: React.FC<any> = () => {
  const [list, setList] = useState([]);
  const [initVersion, setInitVersion] = useState('1.0');
  const [maxVersion, setMaxVersion] = useState('1.0');
  const [data, currentVersion, { renderUpdateScene }] = useSceneData('1.0');

//进入面板获取情景库版本信息及情景库数据
  useEffect(() => {
    getSceneVersionInfo()
      .then((response: any) => {
        const { currVersion, allVersionList } = response;
        const max = allVersionList[allVersionList.length - 1];
        setInitVersion(currVersion);
        setMaxVersion(max);
        // 获取情景库数据
        getSceneData(currVersion)
          .then((d: any) => {
            setList(d);
          })
          .catch(() => {});
      })
      .catch(() => {});
  }, []);

//当用户点击更新情景库后,拿到最新的版本号跟情景数据
  useUpdateEffect(() => {
    setList(data);
    setInitVersion(currentVersion);
  }, [data, currentVersion]);

  const handleUpdate = () => {
    //调用自定义 hooks 方法
    renderUpdateScene(maxVersion);
  };


    return (
      <View>
        <ScrollView
          contentContainerStyle={styles.scrollViewContent}
          showsVerticalScrollIndicator={false}
        >
          {initVersion < maxVersion && (
            <TouchableOpacity onPress={handleUpdate}>
              <TYText>update download</TYText>
            </TouchableOpacity>
          )}
          {list.map((item: any) => {
            return (
              <View  key={item.sceneId}>
                  <Image  source={{ uri: item.icon }} resizeMode="cover" />
                  <TYText >{item.sceneName}</TYText>
              </View>
            );
          })}
        </ScrollView>
      </View>
    );
};
export default SceneFunScene;