You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

react-native-modal-datetime-picker安卓日期选择状态不更新问题

问题根因
  • 跨端回调参数不一致:react-native-modal-datetime-picker 底层调用系统原生日期选择器,iOS端onChange回调第一个参数直接返回选中的Date对象;安卓端onChange回调遵循@react-native-community/datetimepicker的规范,第一个参数是原生事件对象,第二个参数才是选中的Date实例,原代码直接取第一个参数赋值,安卓端拿到的是事件对象而非日期,自然无法正确更新状态。
  • 代码存在无效语法:showDatePicker、hideDatePicker函数中写的chosenDate: ''、chosenDate: moment(date).format('DD-MM-YYYY')属于脱离对象上下文的标签语法,不会执行任何变量定义/状态更新逻辑,是完全无效的废代码。
  • 状态更新时机不可靠:安卓不同系统版本的原生日期选择器触发onChange的逻辑不一致,部分版本滑动选择时不会实时触发onChange,只有点击确认按钮才会返回最终选中值,仅依赖onChange更新状态会出现偶发不同步问题。
修复方案
  1. 修正onChange回调的参数取值,兼容双端逻辑,同时过滤安卓端取消选择时返回的undefined日期值
  2. 删除两处无效的chosenDate废代码
  3. 把最终的状态更新逻辑放到onConfirm回调中,保证双端点击确认后才更新选中值,行为完全统一

修复后的核心实现代码:

const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [birthDate, setBirthDate] = useState(new Date());

const showDatePicker = () => {
  setDatePickerVisibility(true);
};

const hideDatePicker = () => {
  setDatePickerVisibility(false);
};

const handleConfirm = (date) => {
  // 确认选择时统一更新状态,双端行为一致
  setBirthDate(date);
  hideDatePicker();
};

const updateBday = () => {
  console.log("Date", birthDate)
  updateDoc(doc(db, 'users', user.uid), {
    dateOfBirth: birthDate
  }).then(() => {
    navigation.navigate('GenderPage')
  }).catch((error) => {
    alert(error.message);
  })
};

return (
  <View style={styles.inputView}>
    <TouchableOpacity style={styles.textInput} onPress={showDatePicker}>
      <AntDesign name="calendar" size={30} color="black" style={styles.calendarIcon} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        // 兼容双端参数,实现选择时实时预览效果
        onChange={(event, date) => {
          // 安卓端触发取消操作时date为undefined,跳过无效更新
          if (date) setBirthDate(date);
        }}
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
      <Text style={styles.dateView}>
        {birthDate ? moment(birthDate).format('   MMMM DD, YYYY') : '-'}
      </Text>
    </TouchableOpacity>
  </View>
)

如果使用的是v14以上版本的react-native-modal-datetime-picker,以上写法可以直接生效,不需要额外配置。

内容的提问来源于stack exchange,提问作者RoboCop

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 16:24:30