美文网首页
react-native获取农历日期和二十四节气

react-native获取农历日期和二十四节气

作者: zhouIncreator | 来源:发表于2019-06-21 19:24 被阅读0次

    react-native获取农历日期和二十四节气

    这是做react-native开发以来写的第一篇文章,记录一下开始,以后还会有更多的文章发出来!


    问题描述

    开发中有这样的需求,要把当前的日期转化为农历日期或者根据当前的时间获取当前时间所对应的节气(如果当前时间不是节气则取值最近过去的一个节气)。在网上查了很多资料,大部分方法得出的结果与实际有些出入;也有些提供api查询数据,但需要异步请求,并且有次数限制。

    所以我们需要一个简单、有效的方法。

    npm上面有位牛人封装了一个获取农历数据(农历日期、生肖、天干地支等)的工具,感谢这位朋友,如果这个工具能满足你所有的需求,请跳过下面的部分,下面是工具的飞机票

    npm solarlunar

    获取日期的方法可以直接从工具中得出,而且你还可以使用该工具得到其他的你想要的数据。

    获取公历对应农历日期的方法:

    import solarLunar from 'solarLunar';
    const solar2lunarData = solarLunar.solar2lunar(2015, 10, 8); // 输入的日子为公历

    框架中的方法得到的数据和我想要的有些出入,我想要的结果是当前日期对应的是二十四节气中的哪一个节气,然后根据节气取得对应的节气图片,但是方法中得到的是某一年的某一个节气对应的是某个月份的第几天,见下图方法介绍:

    image

    获取公历日期对应节气的方法:

    那么接下来的事情需要自己想办法,首先需要借助这个工具,使用npm命令 npm install --save solarlunar ,我是在windows平台上运行的react,命令与mac略微不同.
    添加module,重新执行react-native run-android运行项目.
    (PS:如果不用这个工具可以执行 npm uninstall solarlunar卸载)

    因为每个月对应的是两个节气,所以我们可以根据日期来判断是哪一个节气,以下是我获取当前日期对应的节气的方法:

    /**
         * 获取是哪一个二十四节气
         * */
        static getCurrentJQ() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            const arr = [];
            console.log('当前的日期:'+day);
            for (let i = 1; i < 25; i++) {
                console.log('节气对应的日期:i = '+i+'   day ='+solarlunar.getTerm(year, i));
                arr.push(solarlunar.getTerm(year, i));
            }
            for (let i = 0; i < arr.length; i++) {
                console.log('节气对应的日期22222:i = '+i+'   day ='+arr[i]);
            }
            if ((month === 1 && day < arr[0])) {
                return 23;//年初的冬至
            } else if (month === 1 && (day >= arr[0] && day < arr[1])) {
                return 0;//小寒
            }
            else if (month === 2 && (day >= arr[2] && day < arr[3])) {
                return 2;//立春
            }
            else if (month === 3 && (day >= arr[4] && day < arr[5])) {
                return 4;//惊蛰
            }
            else if (month === 4 && (day >= arr[6] && day < arr[7])) {
                return 6;//清明
            }
            else if (month === 5 && (day >= arr[8] && day < arr[9])) {
                return 8;//立夏
            }
            else if (month === 6 && (day >= arr[10] && day < arr[11])) {
                return 10;//芒种
            }
            else if (month === 7 && ((day >= arr[12] && day < arr[13]))) {
                return 12;//小暑
            }
            else if (month === 8 && (day >= arr[14] && day < arr[15])) {
                return 14;//立秋
            }
            else if (month === 9 && (day >= arr[16] && day < arr[17])) {
                return 16;//白露
            }
            else if (month === 10 && (day >= arr[18] && day < arr[19])) {
                return 18;//寒露
            }
            else if (month === 11 && (day >= arr[20] && day < arr[21])) {
                return 20;//立冬
            }
            else if (month === 12 && (day >= arr[22] && day < arr[23])) {
                return 22;//大雪
            }
            else if ((month === 1 && (day >= arr[1]) || (month === 2 && day < arr[2]))) {
                return 1;//大寒
            }
            else if ((month === 2 && day >= arr[3]) || (month === 3 && day < arr[4])) {
                return 3;//雨水
            }
            else if ((month === 3 && day >= arr[5]) || (month === 4 && day < arr[6])) {
                return 5;//春分
            }
            else if ((month === 4 && day >= arr[7]) || (month === 5 && day < arr[8])) {
                return 7;//谷雨
            }
            else if ((month === 5 && day >= arr[9]) || (month === 6 && day < arr[10])) {
                return 9;//小满
            }
            else if ((month === 6 && day >= arr[11]) || (month === 7 && day < arr[12])) {
                return 11;//夏至
            }
            else if ((month === 7 && day >= arr[13]) || (month === 8 && day < arr[14])) {
                return 13;//大暑
            }
            else if ((month === 8 && day >= arr[15]) || (month === 9 && day < arr[16])) {
                return 15;//处暑
            }
            else if ((month === 9 && day >= arr[17]) || (month === 10 && day < arr[18])) {
                return 17;//秋分
            }
            else if ((month === 10 && day >= arr[19]) || (month === 11 && day < arr[20])) {
                return 19;//霜降
            }
            else if ((month === 11 && day >= arr[21]) || (month === 12 && day < arr[22])) {
                return 21;//小雪
            }
            else if ((month === 12 && day >= arr[23])) {
                return 23;//年末的冬至
            }
        }
    

    注意遍历获取当年所有节气日期的时候,是从1开始:

    const arr = [];
     for (let i = 1; i < 25; i++) {
           arr.push(solarlunar.getTerm(year, i));
     }
    

    在返回节气对应的位置后,我们可以根据对应位置取得对应的节气图片:

    第一步:申明图片数组,依次为从小寒到冬至的图片

    let imageSrcArray = [require('../../res/images/pic_term_1.jpg'), require('../../res/images/pic_term_2.jpg'),
                require('../../res/images/pic_term_3.jpg'), require('../../res/images/pic_term_4.jpg'),
                require('../../res/images/pic_term_5.jpg'), require('../../res/images/pic_term_6.jpg'),
                require('../../res/images/pic_term_7.jpg'), require('../../res/images/pic_term_8.jpg'),
                require('../../res/images/pic_term_9.jpg'), require('../../res/images/pic_term_10.jpg'),
                require('../../res/images/pic_term_11.jpg'), require('../../res/images/pic_term_12.jpg'),
                require('../../res/images/pic_term_13.jpg'), require('../../res/images/pic_term_14.jpg'),
                require('../../res/images/pic_term_15.jpg'), require('../../res/images/pic_term_16.jpg'),
                require('../../res/images/pic_term_17.jpg'), require('../../res/images/pic_term_18.jpg'),
                require('../../res/images/pic_term_19.jpg'), require('../../res/images/pic_term_20.jpg'),
                require('../../res/images/pic_term_21.jpg'), require('../../res/images/pic_term_22.jpg'),
                require('../../res/images/pic_term_23.jpg'), require('../../res/images/pic_term_24.jpg')];
    

    第二步:赋值给source

    <Image
                        style={styles.image}
                        source={imageSrcArray[TimeUtils.getCurrentJQ()]}/>
    

    至此,获取当前日期对应的节气图片完成。
    以上是我获取节气的方法,测试的2019、2020年节气均无误。
    文章中如果有错误的地方,还请指教!
    如果对你有所帮助,点个赞呗!

    相关文章

      网友评论

          本文标题:react-native获取农历日期和二十四节气

          本文链接:https://www.haomeiwen.com/subject/invuqctx.html