Reagieren Native: Wie setzen Sie DatePickerAndroid?

Entsprechend der RN docs, müssen Sie rufen Sie einen der async/await-Funktion zum öffnen der Android-Datum-Picker. Ich habe versucht, die Installation des Asynchronen Generators transformieren Babel preset und hinzufügen .babelrc-Datei mit

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

aber das scheint nur werfen ein unerwartetes token-Fehler beim hinzufügen der RN-Komponente mithilfe von tags (z.B. < Bild (... /> werfen würde und unerwartetes token-Fehler). Dies ist, was meine Funktion zum öffnen des Android-Datum-Picker sieht aus 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);
  }
}

InformationsquelleAutor MiLeung | 2016-07-06

Meine Art, ohne irgendwelche Pakete, die nur mit den docs DatePickerAndroid und TimePickerAndroid

import-Komponenten, was Sie brauchen. Für mich sind:

import {
Text,
SafeAreaView,
TouchableOpacity,
View,
Platform,
StatusBar,
DatePickerIOS,
Slider,
DatePickerAndroid,
TimePickerAndroid,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import MainStyles from '../styles/MainStyles';

Dann stellen Sie Ihre Stand:

constructor(props) {
 super(props);
 this.setDate = this.setDate.bind(this);
 this.state = {
   chosenDate: new Date(),
   chosenAndroidTime: '00:00',
   androidDate: `${new Date().getUTCDate()}/${new Date().getUTCMonth() + 1}/${new Date().getUTCFullYear()}`,
   value: 50,
 };
}

Nach declarate funcs:

setDate(newDate) {
  this.setState({ chosenDate: newDate });
}

setDateAndroid = async () => {
  try {
    const {
      action, year, month, day,
    } = await DatePickerAndroid.open({
    date: new Date(),
    minDate: new Date(),
    });
    if (action !== DatePickerAndroid.dismissedAction) {
      this.setState({ androidDate: `${day}/${month + 1}/${year}` });
    }
  } catch ({ code, message }) {
    console.warn('Cannot open date picker', message);
  }
};

setTimeAndroid = async () => {
  try {
    const { action, hour, minute } = await TimePickerAndroid.open({
      hour: 14,
      minute: 0,
      is24Hour: false, //Will display '2 PM'
    });
    if (action !== TimePickerAndroid.dismissedAction) {
      //Selected hour (0-23), minute (0-59)
      const m = (minute < 10) ? `0${minute}` : minute;
      const h = (hour < 10) ? `0${hour}` : hour;
      console.log(`time: ${hour}:${minute}`);
      this.setState({ chosenAndroidTime: `${h}:${m}` });
    }
  } catch ({ code, message }) {
    console.warn('Cannot open time picker', message);
  }
};

Schließlich hinzufügen, um Ihre view-container:

       {
          Platform.OS === 'ios' ? (
            <DatePickerIOS
              date={chosenDate}
              onDateChange={this.setDate}
            />
          ) : (
            <View style={MainStyles.AndroidDatePickerWrap}>
              <TouchableOpacity onPress={() => this.setDateAndroid()}>
                <View style={MainStyles.HistoryTime}>
                  <Icon name="ios-calendar" size={25} color="rgb(49, 49, 49)" />
                  <Text style={[MainStyles.HistoryTimeText, { fontSize: 16 }]}>
                    {androidDate}
                  </Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => this.setTimeAndroid()}>
                <View style={MainStyles.HistoryTime}>
                  <Icon name="ios-time" size={25} color="rgb(49, 49, 49)" />
                  <Text style={[MainStyles.HistoryTimeText, { fontSize: 16 }]}>
                    {chosenAndroidTime}
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
          )
        }

Als Ergebnis müssen Sie sehen differt picker für iOS und android.
Dies funktioniert für mich, hoffe, dass diese Hilfe für Sie.

Dies ist eine großartige Lösung. Stellen Sie sicher, dass {androidDate} zu {dies.Zustand.androidDate}. Und ähnlich wie für {chosenAndroidTime}.

InformationsquelleAutor Serj

Gelöst. meine Funktion ist die 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);
  }
}

Halten Sie im Verstand ich war mit createClass für diese Beispiele, nicht es6-Klassen.

InformationsquelleAutor MiLeung

Habe ich eine Bibliothek für den Date-picker von android in meiner app.
Überprüfen Sie die Probe für die 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 mehr details können Sie hier betrachten :

Datumsauswahl reagieren nativen

Hoffe das hilft dir 🙂

Haben Sie in der Lage gewesen, RN Core DatePickerAndroid API?
Ich habe nicht verwendet, RN Kerne DatePickerAndroid noch.. als Bibliothek Implementierung war Recht einfach...

InformationsquelleAutor Riten

Nur rufen Sie diese Funktion auf einem der DatePicker button

openDatePicker() {
    try {
      DatePickerAndroid.open({
        date: new Date()
      }).then(date => {
        if (date.action !== DatePickerAndroid.dismissedAction) {
          //Please take note that the number of the months is based on 
          //the count of an index, let say January is 0, February is 1 and so on...
          //if you want the count to be  1 to 12 for months, then add 1

          const finalDate = `${date.month + 1} ${date.day} ${date.year}`;
          console.log(finalDate)

          //Let say i pick February 10 2019, the output will be 2 10 2019
          //You can use moment to format the date as you like 

          //Here's an example:
          //console.log(moment(finalDate, 'MM DD YYYY').format('LL'))
          //Output: February 10, 2019
        }
      });
    } catch ({ code, message }) {
      console.warn('Cannot open date picker', message);
    }
  }

InformationsquelleAutor albert

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.