如何正确使用物料 LampModuleSchedule
Posted: 2024年 Apr 11日 15:13
按照该文档 所描述的方法，安装相关依赖并导入：
项目是直接 在 tuya-mini-app 的ide 新建的 sdm模板
Code: Select all
yarn add @ray-js/lamp-module-schedulehome/inex.tsx
Code: Select all
import React from 'react';
import { View } from '@ray-js/ray';
import LampModuleSchedule from '@ray-js/lamp-module-schedule';
// 根据需求自行调整
const actionList = [
{
label: '开启', // 开启
dpList: [
{
value: true,
code: 'switch',
id: 1,
},
],
},
{
label: '关闭', // 关闭
dpList: [
{
value: false,
code: 'switch',
id: 1,
},
],
},
];
export function Home() {
const { query } = ty.getLaunchOptionsSync();
console.log(query);
return (
<View>
<LampModuleSchedule
devId={query.deviceId}
supportCloudTimer
timingConfig={{
actionList,
timerLimitNum: 6,
}}
themeConfig={{
theme: 'dark',
// 整体背景色
background: '#0E263E',
// 品牌色
brandColor: '#00BE9B',
// 字体颜色
fontColor: {
titlePrimary: '#FFFFFF', // 主要标题文字颜色
textPrimary: '#FFFFFF', // 主要文字颜色
textRegular: 'rgba(255, 255, 255, 0.5)', // 常规文字颜色
},
// 卡片样式
card: {
background: 'rgba(35, 58, 82, 0.78)',
borderColor: 'rgba(255, 255, 255, 0.102054)',
textPrimary: '#fff',
textRegular: 'rgba(255, 255, 255, 0.5)',
},
// 时间选择器样式
timer: {
background: '#0E263E', // 背景色
timerPickerBorderColor: '#1f3040', // 分割线颜色
customStyle: {
color: '#fff', // 自定义周期文字颜色
borderColor: 'rgba(255, 255, 255, 0.102054)', // 自定义周期边框颜色
background: 'rgba(35, 58, 82, 0.78)', // 自定义周期卡片背景色
},
},
}}
onBeforeTimerChange={(res, type, timerList) => {
console.log(res, type, timerList, 'onBeforeTimerChange');
// 支持异步
// return new Promise(resolve => {
// setTimeout(() => {
// resolve(true);
// }, 100);
// });
// 同步
return true;
}}
onCountdownToggle={(_countdown: number) => {
console.log(_countdown, '_countdown_countdown');
}}
onRtcTimeAdd={timerData => {
console.log(timerData, 'onRtcTimeAdd');
}}
onRtcTimeRemove={timerData => {
console.log(timerData, 'onRtcTimeRemove');
}}
onRtcTimeUpdate={timerData => {
console.log(timerData, 'onRtcTimeUpdate');
}}
/>
</View>
);
}
export default Home;package.json
Code: Select all
{
"name": "public-sdm-template",
"version": "1.0.1",
"description": "Panel SDM Template",
"main": "index.js",
"private": true,
"author": "Tuya.inc",
"license": "MIT",
"scripts": {
"start": "ray start --target tuya --bundler=webpack",
"build": "ray build --target tuya --bundler=webpack",
"lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix"
},
"dependencies": {
"@ray-js/lamp-module-schedule": "^0.2.9",
"@ray-js/panel-sdk": "^1.10.0",
"@ray-js/ray": "^1.4.45",
"@ray-js/ray-error-catch": "^0.0.20",
"@reduxjs/toolkit": "^1.9.3",
"clsx": "^1.2.1",
"react-redux": "^7.2.1",
"redux-logger": "^3.0.6"
},
"devDependencies": {
"@commitlint/cli": "^7.2.1",
"@commitlint/config-conventional": "^9.0.1",
"@ray-js/cli": "^1.4.45",
"@types/lodash-es": "^4.17.6",
"@types/react": "^17.0.24",
"@types/react-dom": "^17.0.9",
"core-js": "^3.29.1",
"eslint-config-tuya-panel": "^0.4.1",
"husky": "^1.2.0",
"lint-staged": "^10.2.11",
"typescript": "^4.4.3"
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"eslint --fix",
"git add"
],
"*.{json,md,yml,yaml}": [
"prettier --write",
"git add"
]
}
}然后 ide 上提示如下错误