【LampModuleSchedule】点击更新 timer 的开关时整个列表会闪烁
Posted: 2025年 May 15日 19:51
- Tuya MiniApp IDE 版本信息：0.8.9;
- App 应用版本信息： 6.4.0；
- @ray-js/ray, @ray-js/panel-sdk的版本："@ray-js/ray": "1.6.1"；"@ray-js/panel-sdk": "1.13.1"；
- 移动设备信息：iPhone 13 Pro
- 相关代码：
Code: Select all
import React, { useState, useEffect } from 'react'; import { View, ScrollView } from '@ray-js/ray'; import { useActions, useProps, useDevInfo } from '@ray-js/panel-sdk'; import { TopBar } from '@/components'; import Strings from '@/i18n'; import LampModuleSchedule, { useCountdownTime, useCountdownDpPull, useTriggerChildrenFunction, } from '@ray-js/lamp-module-schedule'; import { getCachedSystemInfo } from '@/api/getCachedSystemInfo'; import styles from './index.module.less'; const sysInfo = getCachedSystemInfo(); /* *定时就这样：分成四种。分别是开灯开风扇，开灯关风扇，关灯开风扇，关灯关风扇。 */ const dpCodes = { switchCode: 'switch_led', // 20 colorSwitchCode: 'switch_rgb', // 104 countdownCode: 'countdown', rtcTimerCode: 'rtc_timer', workModeCode: 'woke_mode', fanSwitchCode: 'fan_switch', // 60 }; // 根据需求自行调整 const actionList = [ { label: Strings.getLang('schedule_action_0'), // 开启 dpList: [ { value: true, code: dpCodes.switchCode, id: 20, }, ], }, { label: Strings.getLang('schedule_action_1'), dpList: [ { value: false, code: dpCodes.fanSwitchCode, id: 60, }, ], }, ]; const Main = () => { const deviceInfo = useDevInfo(); const countdown = useProps(dp => dp.countdown); const actions = useActions(); const [_countdown, setCountdown] = useState(0); // 由于dp获取后不会变化，倒计时数据需要自行进行处理 useCountdownTime(_countdown, (_countdown: number) => { // 进行倒计时更新 setCountdown(_countdown); if (_countdown <= 0) { // 下发dp actions.countdown.set(0); } }); useEffect(() => { if (countdown) { setCountdown(countdown); return; } if (countdown <= 0) { setCountdown(0); } }, [countdown]); const _onCountdownToggle = (_countdown: number) => { console.log(_countdown, 'onCountdownToggle'); if (_countdown <= 0) { // 下发dp actions.countdown.set(0); } }; // const { run: runTimerToggle } = useTriggerChildrenFunction('timerToggle'); // // mock dp触发定时状态修改 // useEffect(() => { // setTimeout(() => { // const timerId = 1; // const timerStatus = false; // runTimerToggle(timerId, timerStatus); // }, 4000); // }, []); // sigmesh协议下需要主动拉取倒计时dp值，防止倒计时dp不同步 const dpId = 26; // TODO: useCountdownDpPull(deviceInfo.devId, dpId); return ( <View className={styles.view} style={{ paddingTop: `${sysInfo.statusBarHeight}px` }}> <TopBar title={Strings.schedule} /> <ScrollView scrollY className={styles.scheduleView}> <LampModuleSchedule devId={deviceInfo?.devId} groupId={deviceInfo?.groupId} supportCountdown supportCloudTimer supportRctTimer showHeader={false} countdownConfig={{ countdown: _countdown, }} style={{ height: '90vh' }} timingConfig={{ actionList, timerLimitNum: 6, }} themeConfig={{ theme: 'dark', // 整体背景色 background: '#000', // 品牌色 brandColor: '#1082FE', // 字体颜色 fontColor: { titlePrimary: '#FFFFFF', // 主要标题文字颜色 textPrimary: '#FFFFFF', // 主要文字颜色 textRegular: 'rgba(255, 255, 255, 0.5)', // 常规文字颜色 }, // 卡片样式 card: { background: '#1F2022', // 卡片背景色 borderColor: 'rgba(255, 255, 255, 0.102054)', textPrimary: '#fff', textRegular: 'rgba(255, 255, 255, 0.5)', }, // 时间选择器样式 timer: { background: 'rgba(0, 0, 0, 1)', // 背景色 timerPickerBorderColor: 'rgba(255, 255, 255, 0.5)', // 分割线颜色 customStyle: { color: '#fff', // 自定义周期文字颜色 borderColor: 'rgba(255, 255, 255, 0.1)', // 自定义周期边框颜色 background: 'rgba(0, 0, 0, 1)', // 自定义周期卡片背景色 }, }, }} onBeforeTimerChange={(res, type, timerList) => { console.log(res, type, timerList, 'onBeforeTimerChange'); // 支持异步 // return new Promise(resolve => { // setTimeout(() => { // resolve(true); // }, 100); // }); // 同步 return true; }} onCountdownToggle={(_countdown: number) => { _onCountdownToggle(_countdown); }} onRtcTimeAdd={timerData => { console.log(timerData, 'onRtcTimeAdd'); }} onRtcTimeRemove={timerData => { console.log(timerData, 'onRtcTimeRemove'); }} onRtcTimeUpdate={timerData => { console.log(timerData, 'onRtcTimeUpdate'); }} /> </ScrollView> </View> ); }; export default Main;Code: Select all
.countdownView { width: 100vw; height: 100vh; background-color: #000; .scheduleView { width: 100vw; height: calc(100vh - 50px); padding-bottom: 20px; background-color: #000; } } // 定时组件样式 bug :global(.countdown-card-mask) { bottom: 0 !important; top: auto !important; }
Code: Select all
- 日志信息：~错误日志或 IDE 运行日志等~ - 问题描述（复现步骤）："@ray-js/lamp-module-schedule": "^0.2.30" ； LampModuleSchedule 的定时列表中单独的定时任务 timer 点击开关，更新的时候整个列表的 timer 内容会跟着闪烁 - 预期结果： 更新 timer 开关时列表不闪烁 - 实际结果：更新 timer 开关时列表闪烁