探索无限可能的React Native日历组件 —— React Native Calendars

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Calendar } from 'react-native-calendars';
 
export default class CalendarScreen extends Component {
  state = {
    selectedDate: ''
  };
 
  render() {
    return (
      <View style={styles.container}>
        <Calendar
          style={styles.calendar}
          onDayPress={(day) => {
            this.setState({ selectedDate: day.dateString });
          }}
        />
        <View style={styles.selectedDateContainer}>
          <Text>Selected Date: {this.state.selectedDate}</Text>
        </View>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  calendar: {
    width: '100%',
    height: 350,
  },
  selectedDateContainer: {
    marginTop: 10,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

这个代码示例展示了如何在React Native应用中集成react-native-calendars库，并创建一个简单的日历组件。用户可以选择日历上的日期，并且被选择的日期会显示在屏幕下方的文本组件中。这个例子简单易懂，并且展示了如何使用React Native和React Native Calendars来构建日期选择功能。