@react-native-community/datetimepicker iOS端TIME模式时间重置问题求助

这个问题本质是state维护不当或iOS平台回调逻辑未处理到位导致的，以下是具体修复步骤：

核心原因分析 #

iOS端的DateTimePicker在TIME模式下，点击「取消」或「确认」按钮都会触发onChange事件，但点击取消时selectedDate参数为undefined。如果没做判断就直接更新state，或者初始化/渲染时错误地将value设为实时当前时间，就会出现修改后自动重置的情况。

修复步骤 #

1. 正确初始化并维护选中时间的state #

确保state只在组件挂载时初始化一次，不要在render过程中重复创建新的Date实例：

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

const TimePickerComponent = () => {
  // 组件挂载时初始化选中时间为当前时间
  const [selectedTime, setSelectedTime] = useState(new Date());
  const [showPicker, setShowPicker] = useState(false);

  // ...后续逻辑
};

2. 正确处理onChange回调 #

针对iOS的回调特性，判断selectedDate是否有效，仅在确认选择时更新state：

const handleTimeChange = (event, selectedDate) => {
  // 关闭picker（如果是弹窗模式）
  setShowPicker(false);
  
  // 仅当选中有效时间时更新state
  if (selectedDate) {
    setSelectedTime(selectedDate);
  }
};

3. 给picker指定稳定的value属性 #

确保value始终绑定到维护的state，不要直接写value={new Date()}（这会导致每次渲染重置时间）：

<DateTimePicker
  value={selectedTime}
  mode="time"
  onChange={handleTimeChange}
  display="spinner" // iOS推荐使用spinner模式，避免交互异常
/>

4. 升级依赖包版本 #

如果以上方法无效，检查@react-native-community/datetimepicker的版本，旧版本可能存在iOS平台的bug，升级到最新稳定版即可解决。

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