React Native使用NativeBase DatePicker报value相关错误如何解决

问题根源 #

报错来自NativeBase DatePicker底层依赖的RNDateTimePicker组件，该组件要求必须传入value属性绑定当前选中的日期值，同时所有日期类型属性必须传入合法的Date对象，你当前的写法不符合属性规范触发了校验错误。

修复步骤 #

• 将DatePicker的date属性替换为value属性，匹配底层组件的参数要求
• 把minDate、maxDate的字符串值转换为Date对象传入
• 在onDateChange回调中增加类型兼容处理，确保存入state的始终是合法Date对象

修改后的代码片段 #

替换你原有代码中DatePicker部分即可：

<Item last>
  <DatePicker 
    style={{ width: 200 }} 
    value={date} 
    mode="date" 
    placeholder="select date" 
    format="YYYY-MM-DD" 
    minDate={new Date("2016-05-01")} 
    maxDate={new Date("2017-11-01")} 
    confirmBtnText="Confirm" 
    cancelBtnText="Cancel" 
    onDateChange={(newDate) => {
      // 兼容不同版本回调返回值类型，避免存入非Date对象
      const parsedDate = typeof newDate === 'string' ? new Date(newDate) : newDate
      setDate(parsedDate)
    }} 
  />
</Item>

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