Ant Design Mobile RN 中 DatePicker 组件常见问题解析

问题背景

在使用 Ant Design Mobile RN 的 DatePicker 和 DatePickerView 组件时，开发者可能会遇到一些常见的错误，特别是在 React Native 0.74.2 版本环境下。这些错误通常表现为无法读取某些属性的值，导致应用崩溃。

常见错误类型

1. "Cannot read property 'getTime' of null"
   当 DatePickerView 的 value、minDate 或 maxDate 属性传入 null 值时会出现此错误。

2. "Cannot read property 'getFullYear' of null"
   当 DatePicker 组件的 value 属性传入 null 值时会出现此错误。

问题根源分析

这些错误的核心原因是组件内部对日期对象的处理逻辑假设传入的值总是有效的 Date 对象。当传入 null 或 undefined 时，组件尝试调用 Date 对象的方法（如 getTime() 或 getFullYear()）就会抛出异常。

解决方案

1. 确保传入有效的 Date 对象

对于所有日期相关的属性（value、minDate、maxDate），必须确保传入的是有效的 Date 对象，而不是 null 或 undefined。

// 错误示例
<DatePickerView value={null} />

// 正确示例
<DatePickerView value={new Date()} />

2. 处理可选日期参数

如果某些日期参数是可选的，可以使用 undefined 代替 null：

<DatePickerView
  value={this.state.timeValue || undefined}
  minDate={this.props.minDate ? new Date(this.props.minDate) : undefined}
  maxDate={this.props.maxDate ? new Date(this.props.maxDate) : undefined}
/>

3. 关于 mode 属性的使用

文档中提到 mode 属性已被标记为 @deprecated，建议使用 precision 属性替代。但如果你需要特定的时间格式显示（如仅显示"HH:mm"），可以这样处理：

<DatePicker
  precision="minute"  // 替代旧的 mode="time"
  format="HH:mm"     // 控制显示格式
/>

最佳实践建议

1. 初始化默认值：为所有日期相关的状态设置合理的默认值，避免初始化为 null。

2. 类型检查：使用 PropTypes 或 TypeScript 对 props 进行类型检查，确保传入的是 Date 对象。

3. 错误边界：在组件外层添加错误边界处理，防止因日期处理错误导致整个应用崩溃。

4. 日期库辅助：使用 dayjs 或 moment 等日期库来简化日期操作和格式化。

总结

Ant Design Mobile RN 的日期选择组件对输入值的类型要求严格，开发者需要确保传入有效的 Date 对象。通过遵循上述解决方案和最佳实践，可以避免常见的日期处理错误，构建更健壮的 React Native 应用。