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 (
<View style={{flex: 1,backgroundColor:'white'}}>
{this.createHeaderBar()}
{this.createDayBar()}
{this.creatContent()}
</View>
)
}
createHeaderBar = () =>{
return(
<View style={{
height: 50,
width: Constant.metric.screenWidth,
backgroundColor: Constant.colors.Theme,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}>
<TouchableOpacity
activeOpacity={1}
style={{marginLeft: 10}}
onPress={this.clickPrevious}>
<Image
style={{
height: 30,
width: 30
}}
source={require('../../imgs/Profile/profile_previous.png')}
resizeMode={'contain'}/>
</TouchableOpacity>
<Text style={{
fontSize: 20,
color: Constant.colors.whiteColor
}}>
{this.state.year + '年' + this.state.month + '月'}
</Text>
<TouchableOpacity
activeOpacity={1}
style={{marginRight: 10}}
onPress={this.clickNext}>
<Image
style={{
height: 30,
width: 30
}}
source={require('../../imgs/Profile/profile_next.png')}
resizeMode={'contain'}/>
</TouchableOpacity>
</View>
)
}
createDayBar = () =>{
return(
<View style={{
height: 40,
width: Constant.metric.screenWidth,
alignItems: 'center',
flexDirection: 'row',
}}>
{this.createLab()}
</View>
)
}
creatContent = () =>{
return(
<FlatList
data={this.state.dayData}
numColumns={7}
horizontal={false}
extraData={this.state}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}/>
)
}
createLab = () => {
var dateArray = ['一', '二', '三', '四', '五', '六', '七']
var array = []
for (var i = 1; i < 8; i++) {
array.push(
<View
key={i}
style={{
width: Constant.metric.screenWidth / 7,
height: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Constant.colors.Theme
}}>
<Text style={{
color: Constant.colors.whiteColor,
fontSize: 16
}}>
{dateArray[i - 1]}
</Text>
</View>
)
}
return array
}
- FlatList renderItem配置
renderItem = ({item,index}) => {
return (
<TouchableOpacity
activeOpacity={1}
onPress={this.clickItem.bind(this, item, index)}>
<View
style={{
width: Constant.metric.screenWidth / 7,
height: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: this.state.color[index] == 1 ? Constant.colors.Theme : Constant.colors.whiteColor
}}>
<Text
style={{color: Constant.colors.contentOne}}>{item}</Text>
</View>
</TouchableOpacity>
)
}
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,
})
}
到此日历就完成了 ~~~~
代码供上,有些布局自行修改 详细代码
