使用Expo时无法解析datetimepicker模块，求替代方案

1. Expo 官方 DateTimePicker #

这是Expo官方维护的组件，完全适配Expo生态，不存在第三方依赖兼容问题，是最稳妥的替代方案，Expo项目默认已集成兼容版本，无需额外安装。

用法示例： #

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
  const [date, setDate] = useState(new Date());
  const [showPicker, setShowPicker] = useState(false);

  const handleDateChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShowPicker(false);
    setDate(currentDate);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="选择日期" onPress={() => setShowPicker(true)} />
      {showPicker && (
        <DateTimePicker
          value={date}
          mode="date"
          display="default"
          onChange={handleDateChange}
        />
      )}
    </View>
  );
}

2. react-native-paper DateTimePicker #

适配Material Design风格，支持日期、时间选择，完全兼容Expo，适合使用MD设计体系的项目。

安装命令： #

expo install react-native-paper

用法示例： #

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { DateTimePicker as PaperDateTimePicker } from 'react-native-paper';

export default function App() {
  const [date, setDate] = useState(new Date());
  const [showPicker, setShowPicker] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="选择日期" onPress={() => setShowPicker(true)} />
      {showPicker && (
        <PaperDateTimePicker
          mode="date"
          value={date}
          onDismiss={() => setShowPicker(false)}
          onChange={(event, selectedDate) => {
            if (selectedDate) setDate(selectedDate);
            setShowPicker(false);
          }}
        />
      )}
    </View>
  );
}

3. 基于 @react-native-picker/picker 自定义日期选择器 #

适合需要高度自定义UI的场景，可以自行封装年、月、日独立选择的组件，灵活性极强。

安装命令： #

expo install @react-native-picker/picker

简单封装示例： #

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { Picker } from '@react-native-picker/picker';

export default function CustomDatePicker() {
  const [year, setYear] = useState(new Date().getFullYear());
  const [month, setMonth] = useState(new Date().getMonth() + 1);
  const [day, setDay] = useState(new Date().getDate());

  const years = Array.from({ length: 50 }, (_, i) => 2024 - i);
  const months = Array.from({ length: 12 }, (_, i) => i + 1);
  const days = Array.from({ length: 31 }, (_, i) => i + 1);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', gap: 20 }}>
      <View style={{ flexDirection: 'row', gap: 10 }}>
        <Picker
          selectedValue={year}
          onValueChange={(itemValue) => setYear(itemValue)}
          style={{ width: 100 }}
        >
          {years.map(y => <Picker.Item key={y} label={y.toString()} value={y} />)}
        </Picker>
        <Picker
          selectedValue={month}
          onValueChange={(itemValue) => setMonth(itemValue)}
          style={{ width: 80 }}
        >
          {months.map(m => <Picker.Item key={m} label={m.toString()} value={m} />)}
        </Picker>
        <Picker
          selectedValue={day}
          onValueChange={(itemValue) => setDay(itemValue)}
          style={{ width: 80 }}
        >
          {days.map(d => <Picker.Item key={d} label={d.toString()} value={d} />)}
        </Picker>
      </View>
      <Button title={`确认选择：${year}-${month}-${day}`} onPress={() => {}} />
    </View>
  );
}

4. 基于 date-fns 自定义模态日期选择器 #

适合复杂业务场景，可结合date-fns处理日期逻辑，配合Expo Modal组件实现完全自定义的交互和UI。

安装命令： #

expo install date-fns

核心实现思路： #

1. 用Expo Modal弹出自定义选择界面
2. 使用date-fns的format、addMonths等方法处理日期格式化、月份切换
3. 自定义日历网格或滚动选择器完成日期选择交互

内容的提问来源于stack exchange，提问作者Faisal Ahmed