Wie React verwenden Native DatePickerAndroid

Question

Ich versuche, DatePickerAndroid in React Native verwenden.

De Funktion ist wie folgt:

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 Funktion ist wie folgt:

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> 
     ) 
    } 

Und machen modale Funktion wie folgt:

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> 
     ) 
    } 

Aber wenn die renderModal Bedürfnisse gerendert bekomme ich einen Fehler:

Answer 1

Wenn Platform.OS === "android", die datePicker Variable enthalten, was von showAndroidDatePicker zurückgegeben wird, momentan nichts (eigentlich undefined). Um plattformspezifische Kommissionierer anzuzeigen, können Sie das folgende innerhalb des modalen verwenden:

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

und rufen showAndroidDatePicker z.B. in componentDidMount.