如何使用React Native DatePickerAndroid

Question

我想在React Native中使用DatePickerAndroid。

德功能如下：

showAndroidDatePicker = async() => { 
     try { 
      const {action, year, month, day} = await DatePickerAndroid.open({ 
       date: this.state.selectedValue 
      }); 
      if (action !== DatePickerAndroid.dismissedAction) { 
       var date = new Date(year, month, day); 
       this.setState({selectedValue: date.toLocaleDateString()}); 
      } 
     } catch ({code, message}) { 
      console.warn('Cannot open date picker', message); 
     } 
    }; 

render功能如下：

render() { 
     let numbers = []; 
     for(var i=0; i<=this.props.max; i++) numbers.push((i + '')); 
     return (
      <View> 
       {this.renderModal()} 
       <ItemDetail selectItem={this.selectItem.bind(this)} resetItem={this.resetItem.bind(this)} title={this.props.title} value={formatDate(this.props.value)} icon={this.props.icon} /> 
      </View> 
     ) 
    } 

和渲染模式的功能如下：

renderModal() { 
     if(!this.state.itemPickerVisible) return; 

     let datePicker = <DatePickerIOS date={this.state.selectedValue} mode="date" timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60} onDateChange={(date) => { this.setState({selectedValue: date})}} />; 
     if (Platform.OS === "android"){ 
      datePicker = this.showAndroidDatePicker() 
     } 

     return(
      <Modal animationType="fade" transparent={true} visible={this.state.itemPickerVisible}> 
       <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}> 
        <View style={{flex: 1, backgroundColor: '#000', opacity: 0.4}}> 
        </View> 
        <View style={{backgroundColor: '#fff'}}> 
         <View style={{backgroundColor: '#ddd', flexDirection: 'row', justifyContent: 'space-between', padding: 7}}> 
          <Text style={{padding: 4}}>{this.props.title}</Text> 
          <TouchableHighlight onPress={this.selectedItem.bind(this)}> 
           <Text style={{padding: 4, color: s.colorDark}}>{gettext("Done")}</Text> 
          </TouchableHighlight> 
         </View> 
         <View>        
          {datePicker} 
         </View> 
        </View> 
       </View> 
      </Modal> 
     ) 
    } 

但当renderModal需求被渲染我得到一个错误：

Answer 1

如果Platform.OS === "android"，该datePicker变量将包含任何被showAndroidDatePicker返回，目前没有（实际上undefined）。要显示特定于平台的拾荒者，你可以使用下面的模式中：

<View> 
    {Platform.OS === 'ios' ? 
    <DatePickerIOS date={this.state.selectedValue} mode="date" timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60} onDateChange={(date) => { this.setState({selectedValue: date})}} /> : 
    null 
    } 
</View> 

，并调用showAndroidDatePicker例如在componentDidMount。