RN 日历 签到 上一个月或下一个月的日历
x
import React, { Component } from 'react'
import {
View,
Text,
Image,
Modal,
Easing,
Animated,
StyleSheet,
ScrollView,
TouchableOpacity,
} from 'react-native'
import { Metrics } from '../themes/Metrics'
import { colors } from '../themes/Styles'
// import { t } from '../datas'
import { save, query, remove } from '../themes/storage'
import Images from '../Data/Images'
import LinearGradient from 'react-native-linear-gradient'
let signArr = []
const nowDate = new Date()
class SignPage extends Component {
constructor(props) {
super(props)
this.state = {
y: nowDate.getFullYear(),
mon: nowDate.getMonth(),
day: nowDate.getDate(),
clickNum: undefined,
visible: false,
showModal: false,
bounceValue: new Animated.Value(1), //你可以改变这个值看
rotateValue: new Animated.Value(0),//旋转角度的初始值
loginIn: undefined
}
}
//获得上一个月的第一天
Zhuan() {
let rr = this.state.mon + 1
return this.state.y + '-' + rr + '-' + 1
}
SignDate() {
// console.log('转化成字符串后的时间', this.Zhuan())
var Nowdate = (this.Zhuan()).split("-"), //获取某一日期
NowYear = parseInt(Nowdate[0]), //某年份
NowMonth = parseInt(Nowdate[1]), //某月份
Nowday = parseInt(Nowdate[2]), //某天
date = new Date()
console.log('改变的月份', NowMonth)
//顶部标题样式
let title = NowYear + '年' + NowMonth + '月'
//获取当前月份第一天为周几
date.setFullYear(NowYear);//把当前年份设为某年
date.setMonth(NowMonth - 1);//把当前月份设为某月
date.setDate(Nowday);
let weeks = [0, 1, 2, 3, 4, 5, 6];
//getDay获取当前月份为星期几
let date1 = weeks[date.getDay()];
//获取当前月份天数
let days = undefined
if (NowMonth + 1 === 4 || NowMonth + 1 === 6 || NowMonth + 1 === 9 || NowMonth + 1 === 11) {
days = 30
} else if (NowMonth === 2) {
//世纪年必须要被400整除才为闰年，非世纪年被4整除即可 闰年为29天，平年为28天
if (this.state.y % 100 === 0) {
//世纪年
if (this.state.y % 400 == 0) {
days = 29
} else {
days = 28
}
} else {
//非世纪年
if (this.state.y % 4 === 0) {
days = 29
} else {
days = 28
}
}
} else {
days = 31
}
//参数说明【日期标题-当前月份第一天为周几-当前月份的天数】
return [title, date1, days]
}
componentWillMount() {
// this.GetFrist()
//获取用户是否登陆账号
query('user').then(res => {
console.log('user', res)
if (res === null) {
this.setState({
loginIn: false
})
} else {
this.setState({
loginIn: true
})
let obj = JSON.parse(res)
this.setState({
user: obj.user,
avator: obj.avator
})
}
}).catch(err => {
console.log('user err', err)
})
}
//获取当前日期
getD = () => {
let date = new Date()
let d = date.getDate()
return d
}
//便利数组的格式
dateArr = () => {
let arr = []
for (let i = 0; i < this.SignDate()[1]; i++) {
arr.push('')
}
for (let i = 1; i < this.SignDate()[2] + 1; i++) {
arr.push(i)
}
for (let i = 0; i < 7 - ((this.SignDate()[1] + this.SignDate()[2]) % 7); i++) {
arr.push('')
}
return arr
}
render() {
return (
<View style={styles.container}>
<ScrollView>
<View style={{ justifyContent: 'center', flexDirection: 'row', height: Metrics.CW * 0.24, alignItems: 'center' }}>
<View><TouchableOpacity
onPress={() => {
this.state.mon === 0 ? this.setState({
y: this.state.y - 1,
mon: 11
}) :
this.setState({
mon: this.state.mon - 1
})
}}
>
<Text style={{ color: colors.themecolor, paddingRight: 20 }}>《</Text></TouchableOpacity></View><Text style={{ fontSize: 18, color: colors.themecolor }}>{this.SignDate()[0]}</Text>
<View><TouchableOpacity
onPress={() => {
this.state.mon === 11 ? this.setState({
y: this.state.y + 1,
mon: 0
}) :
this.setState({
mon: this.state.mon + 1
})
}}
>
<Text style={{ color: colors.themecolor, paddingLeft: 20 }}>》</Text></TouchableOpacity></View>
</View>
<View
style={{
width: '100%',
height: 60,
justifyContent: 'space-around',
alignItems: 'center',
flexDirection: 'row'
}}>
{
['日', '一', '二', '三', '四', '五', '六'].map((item, index) => {
return (
<Text style={{ fontSize: 16, color: colors.themecolor }}>{item}</Text>
)
})
}
</View>
<View
style={{
width: '100%',
justifyContent: 'space-around',
alignItems: 'center',
flexDirection: 'row',
flexWrap: 'wrap'
}}>
{
this.dateArr().map((items, nums) => {
return (
<TouchableOpacity
onPress={() => {
if (this.state.loginIn) {
if (this.SignDate()[1] === 0) {
if (this.getD() === nums + 1) {
if (signArr[nums]) {
alert('您已签到')
} else {
signArr[nums] = 1
this.setState({
sign: true,
clickNum: nums,
})
}
} else {
alert('请在正确的日期签到')
}
} else {
if (this.getD() + this.SignDate()[1] === nums + 1) {
if (signArr[nums]) {
alert('您已签到', 1)
} else {
signArr[nums] = 1
this.setState({
sign: true,
clickNum: nums,
})
}
} else {
alert('请在正确的日期签到', 1)
}
}
} else {
alert('您还没有登录', 1)
}
}}
style={{ width: '14.28%', marginBottom: 20, justifyContent: 'center', alignItems: 'center' }}>
<View
style={{
width: 26,
height: 26,
borderRadius: 13,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: items === '' ? 'rgba(0,0,0,0)' : signArr[nums] === 1 ? colors.themecolor : 'rgba(0,0,0,0)',
}}>
<Text style={{ fontSize: 14, color: signArr[nums] === 1 ? '#fff' : '#333' }}>{items}</Text>
</View>
</TouchableOpacity>
)
})
}
</View>
<View style={{ width: '100%', justifyContent: 'center', alignItems: 'center', height: 120 }}>
<View
style={{
width: 96,
height: 96,
borderRadius: 48,
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
backgroundColor: colors.themecolor
}}>
<Text style={{ fontSize: 24, color: '#fff', lineHeight: 33 }}>{signArr.length !== 0 ? 10 : 0}</Text>
<Text style={{ fontSize: 12, color: '#fff', lineHeight: 17 }}>我的积分</Text>
</View>
</View>
</ScrollView>
<TouchableOpacity
onPress={() => {
if (this.state.loginIn) {
if (this.SignDate()[1] === 0) {
if (signArr[this.getD() - 1]) {
alert('您已签到', 1)
} else {
signArr[this.getD() - 1] = 1
this.setState({
sign: true,
clickNum: this.getD(),
success: true,
visible: true
})
}
} else {
if (signArr[this.getD() - 1 + this.SignDate()[1]]) {
alert('您已签到', 1)
} else {
signArr[this.getD() - 1 + this.SignDate()[1]] = 1
this.setState({
sign: true,
clickNum: this.getD() + this.SignDate()[1],
success: true,
showModal: true
})
}
}
} else {
alert('请登录后再进行签到', 1)
}
}}
style={{
justifyContent: 'center',
alignItems: 'center',
width: '100%', height: 60, backgroundColor: colors.themecolor
}}>
<Text style={{ fontSize: 14, color: '#fff' }}>{signArr.length !== 0 ? '您已签到' : '今日签到'}</Text>
</TouchableOpacity>
<Modal
visible={this.state.visible}
transparent={true}>
<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,.3)', position: 'relative', justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
onPress={() => {
this.setState({
visible: false
})
}}
style={{ width: 100, height: 100, borderRadius: 50, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20, color: colors.themecolor }}>确定</Text>
</TouchableOpacity>
</View>
</Modal>
{/*签到特效modal*/}
<Modal
transparent={true}
visible={this.state.showModal}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
position: 'relative',
backgroundColor: 'rgba(0,0,0,.8)'
}}>
<Animated.Image
source={Images.rotateimg}
style={{
width: Metrics.CH,
height: Metrics.CH,
justifyContent: 'center',
alignItems: 'center',
transform: [
//将初始化值绑定到动画目标的style属性上
{ scale: this.state.bounceValue },
//使用interpolate插值函数,实现了从数值单位的映
//射转换,上面角度从0到1，这里把它变成0-360的变化
{
rotateZ: this.state.rotateValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
})
},
]
}}>
</Animated.Image>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
width: '80%',
height: 300,
}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
width: '100%', height: 100, position: 'absolute', bottom: 200
}}>
<Text style={{ fontSize: 33, color: '#fff' }}>积分+10</Text>
<Text style={{ fontSize: 18, color: '#fff', lineHeight: 25 }}>签到成功</Text>
</View>
<Image
resizeMode='cover'
style={{ width: 98, height: 98, borderRadius: 49 }}
source={Images.corn} />
<View
style={{
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: 100,
position: 'absolute',
bottom: 0
}}>
<LinearGradient
colors={['#F6EEAF', '#A57022']}
style={{ width: 143, height: 42, borderRadius: 21 }}>
<TouchableOpacity
onPress={() => {
this.setState({
showModal: false
})
}}
style={{ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 18, color: '#fff' }}>确定</Text>
</TouchableOpacity>
</LinearGradient>
</View>
</View>
</View>
</Modal>
<View style={{ width: '100%', height: 40 }}></View>
</View>
);
}
}
export default SignPage;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
},
imgstyle: {
width: '100%',
height: '100%'
}
})