React-native 自定义日历

1.需求

react native 实现日历功能, 基础知识可以参考 react-native中文网

BC54BF1C-55C7-44BF-ADC9-6B0C328EA6EE.png

• 外部架构及组件

需要的组件: View, TouchableOpacity, Image, Text, FlatList (0.45版本后更新了listView, 性能有待验证)

//需要的头部结构
import React, {Component} from 'react'
import {
    View,
    TouchableOpacity,
    Image,
    Text,
    FlatList,
} from 'react-native'

var index = 1
var year = 2017

• 构造器

    constructor(props) {
        super(props)
        this.state = {
            dayData: [], //每个月的天数数组
            month: 1, //当前月份
            year: year, // 年份
            color:[]  //选中颜色数组
        }
    }

• render方法

 render() {
        return (
            
              {this.createHeaderBar()}
              {this.createDayBar()} 
              {this.creatContent()}
            
        )
 }

 createHeaderBar = () =>{
        return(
            
                
                    
                
                
                    {this.state.year + '年' + this.state.month + '月'}
                
                
                    
                
            
        )
    }

 createDayBar = () =>{
        return(
            
                {this.createLab()}
            
        )
    }

 creatContent = () =>{
        return(
            
        )
    }

 createLab = () => {
        var dateArray = ['一', '二', '三', '四', '五', '六', '七']
        var array = []
        for (var i = 1; i < 8; i++) {
            array.push(
                
                    
                        {dateArray[i - 1]}
                    
                
            )
        }
        return array
    }

• FlatList renderItem配置

renderItem = ({item,index}) => {
        return (
            
                
                    {item}
                
            
        )
  }

 keyExtractor = (item, index) => 'Zdate' + index

• 点击方法

//下一个月
clickNext = () => {
        index++
        if (index > 12) {
            index = 1
            year++
        }
        this.setState({
            month: index,
            year: year
        })
        var dayCount = this.getDaysOfMonth(year, index)
        var dayIn = this.getFirstDay(year, index)
        var temp = []
        var color = []
        for (var i = 1; i < dayIn; i++) {
            temp.push(' ')
            color.push(0)
        }
        for (var i = 1; i <= dayCount; i++) {
            temp.push(i)
            color.push(0)
        }
        this.setState({
            dayData: temp,
            color:color,
        })
    }
 
   //上一个月
    clickPrevious = () => {
        index--
        if (index < 1) {
            index = 12
            year--
        }
        this.setState({
            month: index,
            year: year
        })
        var dayCount = this.getDaysOfMonth(year, index)
        var dayIn = this.getFirstDay(year, index)
        var temp = []
        for (var i = 1; i < dayIn; i++) {
            temp.push(' ')
        }
        for (var i = 1; i <= dayCount; i++) {
            temp.push(i)
        }
        this.setState({
            dayData: temp
        })
    }

• 计算年月日的方法

//每个月有多少天
  getDaysOfMonth = (year, month) => {
        var day = new Date(year, month, 0)
        var dayCount = day.getDate()
        return dayCount
    }

//每个月的第一天是星期几
    getFirstDay = (year, month) => {
        var day = new Date(year, month - 1)
        var dayCount = day.getDay()
        if (dayCount == 0) {
            dayCount = 7
        }
        return dayCount
    }

• 点击选中颜色

 clickItem = (item, index) => {
        if (item == ' ') {
            return
        }
        var temp = this.state.color
        if (temp[index] == 1) {
            temp[index] = 0
        }
        else if (temp[index] == 0) {
            temp[index] = 1
        }
        this.setState({
            color:temp
        })
    }

• 初始加载默认年限

    componentDidMount() {
        var dayCount = this.getDaysOfMonth(year, 1)
        var dayIn = this.getFirstDay(year, 1)
        var temp = []
        var color = []
        for (var i = 1; i < dayIn; i++) {
            temp.push(' ')
            color.push(0)
        }
        for (var i = 1; i <= dayCount; i++) {
            temp.push(i)
            color.push(0)
        }
        this.setState({
            dayData: temp,
            color:color,
        })

    }

到此日历就完成了 ~~~~

代码供上,有些布局自行修改 详细代码