React Native中DatePickerIOS的道具問題

我在Modal中使用DatePickerIOS將選定日期返回到主頁面。React Native中DatePickerIOS的道具問題

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：供給到RCTDatePicker類型Number 的無效丙date，的Date預期實例。檢查DatePickerIOS的渲染方法。

警告：失敗propType：所需道具onDateChange不是RCTDatePicker中指定的。檢查渲染方法 DatePickerIOS。

警告：無法propType：供給到RCTDatePicker類型Number 的無效丙minimumDate，的Date預期實例。檢查DatePickerIOS的渲染方法。

如何避免這些警告並解決此問題？

來源

2016-03-03 Nimila Hiranya

我碰到了這個問題。我認爲已經開啓了一些問題，要求團隊解決這個問題，不知道他們是否這樣做。我正在使用RN 0.16.0，所以現在可能已經修復了。

爲我工作回來然後修改DatePickerIOS.ios.js 渲染方法（生活node_modules /反應本地/庫/組件/ DatePicker的）一個小黑客。

道具那裏調用getTime（）函數返回一個數字，並最終拋出該警告。我擺脫了getTime調用，只是自己離開了屬性，警告消失了，同時保存了正確的數據。

希望有幫助！

來源

2016-03-04 04:47:57

它看起來像一個RN bug。我試過了，得到了同樣的結果。我已經在此打開了一個Github問題。你可以跟蹤它here。一旦問題解決，我會編輯答案。

來源

2016-03-03 08:46:36

React Native中DatePickerIOS的道具問題

回答

相關問題