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的渲染方法。

如何避免这些警告并解决此问题？

答

我碰到了这个问题。我认为已经开启了一些问题，要求团队解决这个问题，不知道他们是否这样做。我正在使用RN 0.16.0，所以现在可能已经修复了。

为我工作回来然后修改DatePickerIOS.ios.js 渲染方法（生活node_modules /反应本地/库/组件/ DatePicker的）一个小黑客。

道具那里调用getTime（）函数返回一个数字，并最终抛出该警告。我摆脱了getTime调用，只是自己离开了属性，警告消失了，同时保存了正确的数据。

希望有帮助！

答

它看起来像一个RN bug。我试过了，得到了同样的结果。我已经在此打开了一个Github问题。你可以跟踪它here。一旦问题解决，我会编辑答案。

React Native中DatePickerIOS的道具问题

相关推荐