Top

【LampModuleSchedule】点击更新 timer 的开关时整个列表会闪烁

小程序开发相关产品技术讨论，包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具（IDE）及其他开发技术相关等话题


Post Reply
15002075425
Posts: 11

  • 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 开关时列表闪烁
Tags:
已解决
求助
物料
缺陷
crisiron
Posts: 136

Re: 【LampModuleSchedule】点击更新 timer 的开关时整个列表会闪烁

感谢反馈，麻烦更新下

Code: Select all

 yarn add --registry=https://registry.npmjs.org/@ray-js/lamp-module-schedule@0.2.31-beta-3

版本，然后在 package.json中配置
"resolutions": {
"@ray-js/lamp-module-schedule": "0.2.31-beta-3"
}, 测试没问题后反馈下 我发布下正式版本

15002075425
Posts: 11

Re: 【LampModuleSchedule】点击更新 timer 的开关时整个列表会闪烁

crisiron 2025年 May 19日 10:31

感谢反馈，麻烦更新下

Code: Select all

 yarn add --registry=https://registry.npmjs.org/@ray-js/lamp-module-schedule@0.2.31-beta-3

版本，然后在 package.json中配置
"resolutions": {
"@ray-js/lamp-module-schedule": "0.2.31-beta-3"
}, 测试没问题后反馈下 我发布下正式版本

测试过没问题，已解决

crisiron
Posts: 136

Re: 【LampModuleSchedule】点击更新 timer 的开关时整个列表会闪烁

正式版本已发布：yarn add --registry=https://registry.npmjs.org/ @ray-js/lamp-module-schedule@0.2.31

Post Reply