阅读 533

七日打卡-react-native 实现周日历(上一周/下一周切换)

日更第六篇,依旧是介绍一款react-native三方库

今天推荐个周日历的组件库的,简单说下基本的需求,需要知道当前是第几周,且可以切换上一周/下一周,操作范围仅在当前月切换。

日历库github地址: react-native-calendar-strip

最基本的使用:

<CalendarStrip
    style={{height:150}}
/>
复制代码


项目一般都是面向国内的,时间文字需要使用中文的,这里可以通过引入moment来本地格式化。

import 'moment/locale/zh-cn'
复制代码


自带的左右按钮可以自由切换上一周下一周,非常方便。
只是这样是没法满足我们的需求,需要自定义上一周和下一周的方法,知道当前月是第几周,头部样式也需要调整下的。

这是获取当前月是第几周的方法和获取当前月总共几周的方法。

componentDidMount() {
    let date = new Date();
    let monthDate = this.getMonthWeek(date);
    this.setState({
        titleDate: monthDate, //设置顶部样式的数据源
    });
}

//获取第几周方法
getMonthWeek = (date) => {
    let w = date.getDay();
    let d = date.getDate();
    if (w === 0) {
        w = 7;
    }
    //获取当前月的最后一天,知道最后一天是第几周即这个月总共几周
    let lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
    let config = {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        week: Math.ceil((d + 6 - w) / 7),
        allWeek: Math.ceil((lastDay.getDate() + 6 - (lastDay.getDay() === 0 ? 7 : lastDay.getDay())) / 7),
    };
    return config;
};
复制代码

这是头部切换周的样式,当是当月第一周的时候,左侧上一周按钮不显示,当月最后一周的时候,右侧下一周按钮不显示。

<View style={{
    height: 38,
    backgroundColor: '#EFF5FF',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
}}>
    {/*左侧按钮部分*/}
    {
        this.state.titleDate.week > 1 ?
            <TouchableOpacity
                onPress={this.lastWeek}
                style={{flexDirection: 'row', alignItems: 'center', marginLeft: 8, width: 80}}>
                <Image style={{width: 21, height: 10, marginRight: 2}}
                       source={require('./img/dealt_ic_last.png')}/>
                <Text>第{this.state.titleDate.week - 1}周</Text>
            </TouchableOpacity> :
            <View style={{width: 80, marginLeft: 8}}/>
    }

    <Text>{this.state.titleDate.year}年 {this.state.titleDate.month}月第{this.state.titleDate.week}周 </Text>
    {/*右侧按钮部分*/}
    {
        this.state.titleDate.week < this.state.titleDate.allWeek ?
            <TouchableOpacity
                onPress={this.nextWeek}
                style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'flex-end',
                    marginRight: 8,
                    width: 80,
                }}>
                <Text>第{this.state.titleDate.week + 1}周</Text>
                <Image style={{width: 21, height: 10, marginLeft: 2}}
                       source={require('./img/dealt_ic_next.png')}/>
            </TouchableOpacity> :
            <View style={{width: 80, marginRight: 8}}/>
    }
</View>
复制代码


修改CalendarStrip的部分属性,自带的左右切换按钮和自带头部样式干掉。

<CalendarStrip
    ref={'calender'}
    style={{height: 60}}
    showMonth={false}
    iconLeft={null}
    iconRight={null}
/>
复制代码

自定义的上一周/下一周方法,通过组件的ref属性去调用组件提供的方法。

/**
 * 上一周
 */
lastWeek = () => {
    this.refs.calender.getPreviousWeek();
    this.state.titleDate.week -= 1;
    this.setState({
        titleDate: this.state.titleDate,
    });
};

/**
 * 下一周
 */
nextWeek = () => {
    this.refs.calender.getNextWeek();
    this.state.titleDate.week += 1;
    this.setState({
        titleDate: this.state.titleDate,
    });
};
复制代码

一个基本的周日历的需求满足了,可能项目里还会涉及到修改其他样式的,官方的api文档里也是有的。
日常项目中,我们经常会用到各种三方库,避免了自己去重复的造轮子,也节约了时间,可以说我们也是站在巨人的肩膀上码代码。