基于React Native与Expo定制日期选择器的技术问询

1. MUI Mobile DatePicker 在 React Native 中报错的原因 #

MUI（Material-UI）是Web 端 React 组件库，依赖浏览器 DOM API，而 React Native 基于原生移动端组件（View、Text 等）运行，两者环境完全不兼容，直接引入必然报错，不要在 React Native 项目中使用 MUI 的移动端日期选择器。

2. 自定义日期选择框点击报错的常见诱因及修复 #

常见错误点 #

• 误用 Web 端事件（比如用 onClick，React Native 中应使用 onPress）
• 状态更新逻辑错误（未正确初始化日期状态、更新触发无限重渲染）
• 依赖未兼容 React Native 的工具函数（比如调用 Date 对象的 Web 专属方法）

推荐实现方案（基于 Expo 官方组件） #

使用 Expo 提供的 DatePickerModal，兼容性和稳定性拉满，示例代码如下：

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { DatePickerModal } from 'expo-date-picker';

export default function CustomDatePicker() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleConfirmDate = (date) => {
    setIsModalVisible(false);
    if (date) setSelectedDate(date);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity 
        style={styles.pickerBtn}
        onPress={() => setIsModalVisible(true)}
      >
        <Text style={styles.btnText}>
          选择日期：{selectedDate.toLocaleDateString()}
        </Text>
      </TouchableOpacity>
      
      <DatePickerModal
        visible={isModalVisible}
        date={selectedDate}
        onConfirm={handleConfirmDate}
        onCancel={() => setIsModalVisible(false)}
        mode="date"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { margin: 20 },
  pickerBtn: {
    padding: 15,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 8,
    alignItems: 'center',
  },
  btnText: { fontSize: 16, color: '#333' }
});

前置操作

先安装依赖：

npx expo install expo-date-picker

纯原生自定义面板实现（无需第三方库） #

如果坚持自己写日期选择面板，注意规避 React Native 与 Web 的差异，示例代码：

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Modal, FlatList, StyleSheet } from 'react-native';

// 获取当月天数
const getMonthDays = (year, month) => new Date(year, month + 1, 0).getDate();

export default function CustomDatePicker() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [showModal, setShowModal] = useState(false);
  const currentYear = selectedDate.getFullYear();
  const currentMonth = selectedDate.getMonth();
  const daysList = Array.from({ length: getMonthDays(currentYear, currentMonth) }, (_, i) => i + 1);

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => setShowModal(true)} style={styles.triggerBtn}>
        <Text>{selectedDate.toLocaleDateString()}</Text>
      </TouchableOpacity>

      <Modal visible={showModal} transparent animationType="slide">
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <FlatList
              data={daysList}
              numColumns={7}
              renderItem={({ item }) => (
                <TouchableOpacity
                  style={[
                    styles.dayItem,
                    item === selectedDate.getDate() && styles.activeDay
                  ]}
                  onPress={() => {
                    setSelectedDate(new Date(currentYear, currentMonth, item));
                    setShowModal(false);
                  }}
                >
                  <Text>{item}</Text>
                </TouchableOpacity>
              )}
            />
            <TouchableOpacity onPress={() => setShowModal(false)} style={styles.closeBtn}>
              <Text>关闭</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { margin: 20 },
  triggerBtn: { padding: 12, borderWidth: 1, borderRadius: 6 },
  modalOverlay: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' },
  modalContent: { backgroundColor: '#fff', padding: 20, borderTopLeftRadius: 16, borderTopRightRadius: 16 },
  dayItem: { width: '14%', padding: 10, alignItems: 'center' },
  activeDay: { backgroundColor: '#2196F3', borderRadius: 50 },
  closeBtn: { marginTop: 20, padding: 10, alignItems: 'center' }
});

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