基于时区切换React Native应用背景图问题求助（Expo）

原代码存在的问题 #

• 时间处理逻辑错误：dayTime的定义(date && time)等价于直接使用time，且toLocaleString的参数格式错误，无法正确处理时区；调用后也未保存结果，完全起不到时区适配作用。
• 状态设计冗余：用counter状态维护小时数完全没必要，应该直接基于实时时间判断显示的图片，无需通过累加值间接计算。
• 条件判断无效：dayTime == 6 <= 18是语法错误的表达式，无法正确匹配需求中的时间段。
• 定时器参数错误：setInterval的时间单位是毫秒，432000毫秒仅为7.2分钟，并非预期的12小时；且useEffect无依赖项，会重复创建定时器引发内存泄漏。
• 图片匹配逻辑错误：counter % imgArray.length的方式无法正确对应日间/夜间场景，例如17点（下午5点）会错误匹配到日间图。

正确实现代码 #

import { useState, useEffect } from 'react';
import { ImageBackground } from 'react-native';
import images from './path/to/your/images'; // 替换为你的图片实际导入路径

const BackgroundScreen = () => {
  // 初始化时根据当前时间设置正确背景图
  const [backgroundImage, setBackgroundImage] = useState(() => {
    const now = new Date();
    const hours = now.getHours();
    return hours >= 5 && hours < 17 ? images.bgDay : images.bgNight;
  });

  // 计算距离下一次切换背景的毫秒数
  const calculateNextSwitchDelay = () => {
    const now = new Date();
    const currentHours = now.getHours();
    let targetHour;

    if (currentHours < 5) {
      // 当前为夜间，下一次切换到日间的时间是当天5点
      targetHour = 5;
    } else if (currentHours >= 5 && currentHours < 17) {
      // 当前为日间，下一次切换到夜间的时间是当天17点
      targetHour = 17;
    } else {
      // 当前为夜间，下一次切换到日间的时间是次日5点
      targetHour = 24 + 5;
    }

    const targetDate = new Date(now);
    targetDate.setHours(targetHour, 0, 0, 0);
    return targetDate.getTime() - now.getTime();
  };

  useEffect(() => {
    const updateBackground = () => {
      const now = new Date();
      const hours = now.getHours();
      setBackgroundImage(hours >= 5 && hours < 17 ? images.bgDay : images.bgNight);
      // 更新后重新设置下一次切换的定时器
      startTimer();
    };

    const startTimer = () => {
      const delay = calculateNextSwitchDelay();
      return setTimeout(updateBackground, delay);
    };

    // 首次启动定时器
    const timerId = startTimer();

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timerId);
  }, []);

  return (
    <ImageBackground source={backgroundImage} style={{ flex: 1 }}>
      {/* 你的页面内容写在这里 */}
    </ImageBackground>
  );
};

export default BackgroundScreen;

代码说明 #

• 时区自动适配：new Date()默认使用设备本地时区，getHours()直接返回当前时区下的小时数，无需额外处理时区转换。
• 精准切换时机：通过计算距离下一个切换时间点的毫秒数，使用setTimeout触发更新，避免固定间隔定时器带来的时间偏差。
• 初始状态正确：组件挂载时直接根据当前时间设置背景图，确保启动时显示正确。
• 内存泄漏防护：组件卸载时清除定时器，每次更新后重新创建新的定时器，逻辑闭环无冗余。
• 清晰的规则匹配：明确5:00-17:00显示日间图，其余时间显示夜间图，完全符合需求。

内容的提问来源于stack exchange，提问作者Softwareninjaneer