проблемы с датой DatePickerIOS in React Native

Question

Я использую DatePickerIOS внутри Modal, чтобы вернуть выбранную дату на главную страницу.

DateTimeController Компонент

var DateTimeController = React.createClass({ 
    show: function() { 
     this.setState({modalVisible: true}); 
    }, 
    getInitialState: function() { 
     return { 
      timeZoneOffsetInHours: this.props.timeZoneOffsetInHours, 
      date: this.props.date, 
      color: this.props.color || '#007AFF', 
      minimumDate: this.props.minimumDate, 
      modalVisible: false 
     }; 
    }, 
    onDateChange: function (date) { 
     this.setState({date: date}); 
    }, 
    cancelButtonPressed: function() { 
     this.setState({modalVisible: false}); 
    }, 
    confirmButtonPressed: function() { 
     if(this.props.onSubmit) this.props.onSubmit(this.state.date); 
     this.setState({modalVisible: false}); 
    }, 
    render: function() { 
     return (
      <Modal 
       animated={true} 
       transparent={true} 
       visible={this.state.modalVisible}> 
       <View style={styles.basicContainer}> 
        <View style={styles.modalContainer}> 
         <View style={styles.buttonView}> 
          <Button onPress={this.cancelButtonPressed} style={styles.timeSectionButtons}>&#xf057;</Button> 
          <Button onPress={this.confirmButtonPressed} style={styles.timeSectionButtons}>&#xf058;</Button> 
         </View> 
         <View style={styles.mainBox}> 
          <DatePickerIOS 
           date={this.state.date} 
           mode="datetime" 
           timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours} 
           onDateChange={this.onDateChange} 
           minimumDate={this.state.minimumDate} 
          /> 
         </View> 

        </View> 
       </View> 
      </Modal> 
     ); 
    } 
}); 

Реализация компонента

getInitialState: function() { 
    return { 
     date: new Date(), 
     timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset()/60, 
    }; 
}, 

onDateChange: function (date) { 
    this.setState({date: date}); 
}, 

return (
    <View style={styles.mainContainer}> 
     <Text 
      style={styles.secondaryText} 
      onPress={()=>{ 
      this.refs.picker.show(); 
     }}> 
      { 
       this.state.date.toLocaleDateString() + 
       ' ' + 
       this.state.date.toLocaleTimeString() 
      } 
     </Text> 

     <DateTimeController ref={'picker'} timeZoneOffsetInHours={this.state.timeZoneOffsetInHours * 60} 
          date={this.state.date} minimumDate={new Date()} 
          onSubmit={(date)=>{ 
      this.setState({date: date}) 
     }} 
     /> 
    <View> 
); 

Я получаю следующие YellowBox предупреждения, когда модальный открывает визуализации DatePickerIOS.

Предупреждение: Ошибка propType: Недопустимый проп date типа Number , подаваемого в RCTDatePicker, как ожидается экземпляр Date. Проверьте метод визуализации DatePickerIOS.

Предупреждение: Неисправность propType: Требуется поддержка onDateChange не была , указанная в RCTDatePicker. Проверьте метод рендеринга DatePickerIOS.

Предупреждение: Ошибка propType: Недопустимый проп minimumDate типа Number , подаваемого в RCTDatePicker, как ожидается экземпляр Date. Проверьте метод визуализации DatePickerIOS.

Как предотвратить эти предупреждения и исправить это?

Answer 1

Я столкнулся с этой проблемой некоторое время назад. Я думаю, что пара вопросов была открыта, и она попросила команду ответить на этот вопрос, но не уверен, что сделали. Я использовал RN 0.16.0, поэтому он, возможно, уже был исправлен.

Небольшой хак, который работал для меня тогда был изменить метод визуализации в DatePickerIOS.ios.js (живет в node_modules/реагировать родной/Библиотеки/Компоненты/DatePicker).

Опоры там называют функцией getTime(), которая возвращает число и заканчивает тем, что бросает это предупреждение. Я избавился от вызова getTime и просто оставил свойство сам по себе, и предупреждение исчезло, сохраняя данные правильно.

Надеюсь, что это поможет!

Answer 2

Это похоже на ошибку RN. Я попробовал и получил тот же результат. Я открыл вопрос Github об этом. Вы можете отслеживать его here. Я отредактирую ответ, как только проблема будет решена.