【亲测免费】 React Native Calendars：跨平台的日历组件

项目介绍

React Native Calendars 是一个声明式的跨平台 React Native 日历组件，支持 iOS 和 Android。这个开源项目由 Wix 团队开发，提供了丰富的功能和高度可定制性，使得在移动应用中集成日历变得简单而高效。

项目技术分析

React Native Calendars 的核心优势在于其纯 JavaScript 实现，无需任何原生代码支持。这不仅简化了开发流程，还确保了组件在不同平台间的一致性。组件支持多种日期标记方式，如点标记、区间标记等，并且提供了详细的文档和示例，帮助开发者快速上手。

项目及技术应用场景

React Native Calendars 适用于需要日历功能的各类移动应用，如个人日程管理、会议预订、活动安排等。其跨平台兼容性和高度可定制性使其成为开发者在构建日历相关功能时的首选组件。

项目特点

• 纯 JavaScript 实现：无需原生代码，简化开发流程。
• 丰富的日期标记功能：支持点标记、区间标记等多种标记方式。
• 高度可定制：可以自定义样式、内容和日期。
• 详细的文档和示例：提供详细的官方文档和丰富的示例代码。
• 支持多种操作：如滑动选择、滚动到今天、日期选择等。
• 支持特定日期限制：允许或阻止特定日期的选择。
• 国际化支持：自动支持不同地区的日期格式。

使用指南

安装

使用 npm 或 Yarn 安装：

npm install --save react-native-calendars
# 或
yarn add react-native-calendars

基本使用

导入并使用 Calendar 组件：

import { Calendar } from 'react-native-calendars';

<Calendar
  onDayPress={day => {
    console.log('selected day', day);
  }}
/>

示例代码

基本日历

import React, { useState } from 'react';
import { Calendar } from 'react-native-calendars';

const App = () => {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={day => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: { selected: true, disableTouchEvent: true, selectedDotColor: 'orange' }
      }}
    />
  );
};

export default App;

自定义样式

<Calendar
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    height: 350
  }}
  current={'2012-03-01'}
  onDayPress={day => {
    console.log('selected day', day);
  }}
  markedDates={{
    '2012-03-01': { selected: true, marked: true, selectedColor: 'blue' },
    '2012-03-02': { marked: true },
    '2012-03-03': { selected: true, marked: true, selectedColor: 'blue' }
  }}
/>

配置本地化

import { LocaleConfig } from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
    'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
  ],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  today: "Aujourd'hui"
};