探索React Native Date Picker：高效、灵活的日历组件

import React, { useState } from 'react';
import { View, Text, DatePickerAndroid, DatePickerIOS } from 'react-native';
 
const DatePickerComponent = () => {
  const [date, setDate] = useState(new Date());
 
  const showAndroidDatePicker = async () => {
    try {
      const { action, year, month, day } = await DatePickerAndroid.open({
        // 设置初始日期
        date: date
      });
      if (action === DatePickerAndroid.dateSetAction) {
        setDate(new Date(year, month, day));
      }
    } catch ({ code, message }) {
      console.warn('Cannot open date picker', message);
    }
  };
 
  const showIOSDatePicker = () => {
    // 在这里实现iOS的日期选择器逻辑
    // 使用DatePickerIOS组件并处理值更改
  };
 
  return (
    <View>
      <Text>选择的日期：{date.toDateString()}</Text>
      <Text onPress={Platform.OS === 'android' ? showAndroidDatePicker : showIOSDatePicker}>点击这里选择日期</Text>
    </View>
  );
};
 
export default DatePickerComponent;

这个代码实例展示了如何在React Native应用中使用DatePickerAndroid和DatePickerIOS来创建一个跨平台的日期选择器。它使用了React Hooks来管理状态，并且根据运行的平台来选择使用哪种日期选择器。这个例子简洁明了，并且提供了一个可复用的日期选择器组件模板。