原生js实现React-Native日历功能

直接上代码

 

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
} from 'react-native';

const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
class Calender extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemsArr: new Array(42),            // 创建一个长度42的数组
      year: new Date().getFullYear(),     // 年
      month: new Date().getMonth() + 1,   // 月
      date: new Date().getDate(),         // 日
      week: new Date().getDay(),          // 周几
      monthStartIndex: 0,                 // 本月第一天是在itemsArr的下标值
      startX: 0,                          // 开始拖拽时的offsetX
    }
  }

  // 本月有多少天
  get monthDays() {
    return new Date(this.state.year, this.state.month, 0).getDate();
  }

  // 上个月有多少天
  get lastMonthDays() {
    return new Date(this.state.year, this.state.month - 1, 0).getDate();
  }

  // 本月第一天是周几
  get weekStart() {
    return new Date(this.state.year, this.state.month - 1, 1).getDay();
  }

  componentDidMount() {
    this.fillDate();
  }

  fillDate = () => {
    const { year, month } = this.state;
    console.log(month);
    // 这个月天数遍历
    let arr = new Array(42);
    for (let i = 1; i <= this.monthDays; i++) {
      arr[this.weekStart + i - 1] = { date: i, month, year };
    }

    // 上个月天数遍历
    let j = 0;
    for (let i = this.weekStart - 1; i >= 0; i--) {
      arr[i] = { date: this.lastMonthDays - j, month: month !== 1 ? month - 1 : 12, year: month !== 1 ? year : year - 1 };
      j++;
    }

    // 计算出本月第一天是在itemsArr的下标值
    let nowMonthStartIndex = 0;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].date === 1) {
        nowMonthStartIndex = i;
        break;
      }
    }

    // 填充下个月
    if (arr.length % 7 !== 0 || arr.includes(undefined)) {
      let k &