React Native升级后Android端DatePickerAndroid报错，求兼容方案

方法1：给react-native-datepicker打补丁（最小改动） #

react-native-datepicker底层依赖RN原生的DatePickerAndroid，而这个API在新版RN中被移到了社区库。用patch-package给依赖库打补丁，替换它的导入和调用逻辑，不用改业务代码：

1. 安装patch-package：

npm install patch-package --save-dev

2. 找到node_modules/react-native-datepicker下的Android相关代码文件（通常是index.js或DatePicker.android.js），修改两处：

   • 替换导入语句：

     // 原代码
     import { DatePickerAndroid } from 'react-native';
     // 替换为
     import DateTimePicker from '@react-native-community/datetimepicker';
     

   • 替换DatePickerAndroid.show的调用逻辑，适配社区库的Promise风格：

     // 原代码类似这样
     DatePickerAndroid.show(options, (result, date) => {
       // 原有回调逻辑
     });
     // 替换为
     DateTimePicker.open({
       ...options,
       value: options.date,
       display: 'default'
     }).then(({ type, value }) => {
       const result = type === 'set' ? 'dateSetAction' : 'dismissedAction';
       typeof callback === 'function' && callback(result, value);
     });
     

3. 生成并保存补丁：

npx patch-package react-native-datepicker

把生成的patches文件夹提交到版本控制，其他开发者安装依赖后执行npx patch-package即可自动应用补丁。

方法2：封装兼容组件（无缝替换） #

自己写一个和react-native-datepickerAPI完全一致的组件，内部用@react-native-community/datetimepicker实现，原有业务代码直接复用：

// 新建CustomDatePicker.js
import React, { useState } from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';
import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';

const CustomDatePicker = ({
  style,
  date,
  mode = 'date',
  placeholder,
  format = 'YYYY-MM-DD',
  onDateChange,
  minDate,
  maxDate,
  ...props
}) => {
  const [showPicker, setShowPicker] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date(date));

  // 模拟react-native-datepicker的日期格式化逻辑
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    if (mode === 'datetime') {
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}`;
    }
    return `${year}-${month}-${day}`;
  };

  const handlePickerChange = (event, newDate) => {
    setShowPicker(false);
    if (newDate) {
      setSelectedDate(newDate);
      onDateChange(newDate);
    }
  };

  return (
    <View style={[style, styles.container]}>
      <TouchableOpacity onPress={() => setShowPicker(true)} style={styles.inputWrapper}>
        <TextInput
          value={formatDate(selectedDate)}
          placeholder={placeholder}
          editable={false}
          style={styles.input}
        />
      </TouchableOpacity>
      {showPicker && (
        <DateTimePicker
          value={selectedDate}
          mode={mode}
          display="default"
          minimumDate={minDate ? new Date(minDate) : undefined}
          maximumDate={maxDate ? new Date(maxDate) : undefined}
          onChange={handlePickerChange}
          {...props}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    paddingHorizontal: 10,
    paddingVertical: 8,
  },
  inputWrapper: {
    width: '100%',
  },
  input: {
    fontSize: 16,
  },
});

export default CustomDatePicker;

然后把原有代码里的import DatePicker from 'react-native-datepicker'替换成import DatePicker from './CustomDatePicker'，所有原有组件的props不用修改，直接使用。

方法3：临时回退RN版本（不推荐长期使用） #

如果不想折腾，可以把RN版本回退到还保留DatePickerAndroid的版本（比如RN 0.69及以下），但这会错过后续的安全更新和新特性，只适合临时应急。

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