React Native: Wie implementieren Sie DatePickerAndroid?

Question

Gemäß den RN-Dokumenten müssen Sie eine async/await-Funktion aufrufen, um die Android-Datumsauswahl zu öffnen. Ich habe die Async versucht, die Installation von Babel Preset Generator transformieren und das Hinzufügen einer .babelrc Datei mit

{ "plugins": ["transform-async-to-generator"] }

aber das scheint nur einen unerwarteten Token Fehler zu werfen, wenn jede RN Komponente Hinzufügen von Tags (zB < Bild verwenden. .. /> würde werfen und unerwarteter Token-Fehler). Das ist, was meine Funktion, um die Android-Datumsauswahl zu öffnen aussieht wie

async openAndroidDatePicker: function() { 
    try { 
    const {action, year, month, day} = await DatePickerAndroid.open({ 
     date: new Date() 
    }); 
    } catch ({code, message}) { 
    console.warn('Cannot open date picker', message); 
    } 
} 

Answer 1

gelöst. meine Funktion Syntax falsch war ... das ist was für mich gearbeitet:

async openAndroidDatePicker() { 
    try { 
    const {action, year, month, day} = await DatePickerAndroid.open({ 
     date: new Date() 
    }); 
    } catch ({code, message}) { 
    console.warn('Cannot open date picker', message); 
    } 
} 

Beachten Sie, ich createClass für diese Beispiele verwendete, nicht es6 Klassen.

Answer 2

Ich habe eine Bibliothek für Datumsauswahl Android in meiner App. Für die Probe Nutzung:

'use-strict'; 

import React, {Component} from 'react' 
import{ 
    StyleSheet, 
    View, 
    Text, 
    Image, 
    TextInput, 
    Dimensions, 

}from 'react-native'; 

import DatePicker from 'react-native-datepicker'; 
var {width,height} = Dimensions.get('window'); 

class Booking extends Component{ 

    constructor(props) { 
    super(props); 
    this.state = { 

    date_in: '2016-05-01', 
    date_out: '2016-05-01', 

}; 
} 

render(){ 

return(
    <View> 

    <Text style={{fontSize:18, marginLeft:10, marginTop:10}}>Arrival/Departure:</Text> 

    <DatePicker 
     style ={{padding:10}} 
     date={this.state.date_in} 
     mode="date" 
     format="YYYY-MM-DD" 
     minDate="2016-05-01" 
     maxDate="2016-06-01" 
     showIcon={false} 
     customStyles={{ 
     dateInput: { 
      alignItems : 'flex-start', 
      padding:5 
     }, 
    }} 
    onDateChange={(date_in) => {this.setState({date_in: date_in});}}/> 

    </View> 
); 
} 
} 


var styles = StyleSheet.create({ 

    picker: { 
    width: 100, 
    }, 
}); 

module.exports = Booking; 

Für weitere Informationen können Sie hier sehen:

Date picker react native

this helps you :)