基于时区改变图像背景- react native

我试图根据应用程序将运行的时区更改图像。如果时区是5：00am，则要显示的图像应该是白天图像，如果时区是5：00pm，则要显示的图像是夜晚。
有人能帮助我吗，我正在尝试用react native expo来做这件事。
以下是我已经尝试过，但它似乎并没有帮助我解决问题：

//background image changer
  const imgArray = [images.bgNight, images.bgDay];

  const date = new Date();
  const time = date.getHours();
  const [counter, setCounter] = useState(time);

  //time zone
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  console.log(timezone);

  const dayTime = date && time;
  dayTime.toLocaleString("en-US", timezone);
  console.log(dayTime);

  //save timer ref - set to 12 hour change (432000 sec)
  useEffect(() => {
    const imageTimerId = setInterval(() => {
      // dayTime < 12 ? setCounter(counter + 1) : counter - 1;
      if (dayTime <= 5) {
        setCounter(counter + 1);
      } else if (dayTime == 6 <= 18) {
        setCounter(counter + 1);
      } else {
        setCounter(counter + 1);
      }
    }, 432000);

    return () => clearInterval(imageTimerId);
  });

  // `image` is derived state from the image array
  const image = imgArray[counter % imgArray.length];
  console.log(image);

非常感谢您的意见和建议，提前感谢您的帮助。

尽量简化

如果只需要在0600或1800时更改图像，则删除时区代码，只使用new Date()返回的时间，如发布代码中的const date声明所示。
考虑更改一些变量名并将图像数组转换为对象：“day”或“night”可以用作day_period状态的可枚举值（而不是“counter”），并用作图像URL对象的数组查找值，例如

const imgURLs = {night: images.bgNightURL, day images.bgDayURL};

（如果还没有，则键值是URL字符串）。

昼夜计算示例

下面的代码用普通JavaScript * 演示了一种方法 *，当本地时间从晚上过渡到早上6点，或者从白天过渡到晚上，到下午6点时，获得回叫。

提供给回调的周期值是字符串值“day”或“night”。
当第一次调用updater时，会同步调用回调函数，当之后发生转换时，会异步调用回调函数。
代码每小时检查一次转换，以自动调整夏令时。
- 代码段以秒为单位进行测试。删除带有“TESTING in SECONDS”注解的行，删除console.log，并取消注解注解那些在运行应用时使用小时值的注解行。*
这是示例代码。在React中的直接实现应该注意避免在组件构造函数中调用setState函数，如果这样做是不允许的。

"use strict";
class DayPeriod {
  constructor() {
    this.notify = true;
    this.period = null; // unknown
    // this.checkInterval = 60*60*1000; // 1 hour
    this.checkInterval = 1000; // TESTING in SECONDS
    this.updater = this.updater.bind(this);
  }
  periodOf( date) {
    // const hour = date.getHours();
    const hour = ++testHours % 24; // TESTING in SECONDS:
    console.log("hour " + hour);
    return (hour < 6 || hour >= 18) ? "night" : "day";
  }
  setPeriod( date) {
    const period = this.periodOf( date);
    this.notify = period !== this.period;
    this.period = period;
  }
  updater( callBack) {
    const date = new Date(); // current date and time
    this.setPeriod( date);
    if( this.notify) {
       callBack( this.period);
       this.notify = false;
    }
    const time = date.getTime();
    const delay = this.checkInterval - time%this.checkInterval;
    setTimeout( this.updater, delay, callBack);
  }
}

/************ test updater ************/

var testHours = 0; // see "TESTING in SECONDS" comments in DayPeriod class

// start a call back to `function(period)` on change of day period.

let currentPeriod = "night"; 

new DayPeriod().updater(
  function (period) {
    console.log("period update: ", period);
    // get React to re-render the image for the updated state.
    currentPeriod = period;
    // ...
  }
)

渲染更新的图片。

调用从useState(...)获得的setState函数应该会触发重新渲染图像。编写JSX来从状态值（代码片段中的currentPeriod）更新图像源超出了我的专业领域，尽管我强烈怀疑您根本不会使用useEffect。
如果您需要解决如何使用新URL呈现图像的问题，请提出新问题（以帮助读者寻找相同问题的解决方案）。

基于时区改变图像背景- react native

1条答案

尽量简化

昼夜计算示例

渲染更新的图片。

相关问题

热门标签

最新问答