七日打卡-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文档里也是有的。
日常项目中，我们经常会用到各种三方库，避免了自己去重复的造轮子，也节约了时间，可以说我们也是站在巨人的肩膀上码代码。