React Native：如何实现DatePickerAndroid？

Question

根据RN文档，您必须调用async / await函数才能打开Android Date Picker。我试过安装异步生成器转换Babel预设并添加.babelrc文件，

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

但这似乎在使用标签添加任何RN组件时似乎引发了意外的令牌错误（例如<Image ... />会引发意外的令牌错误）。这是我打开Android Date Picker的功能

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

我的方式没有任何软件包，仅使用文档DatePickerAndroid和TimePickerAndroid

导入所需组件。对我来说是：

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';

然后设置您的状态：

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,
 };
}

声明函子后：

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

最后添加到您的视图容器：

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

结果，您必须看到iOS和android的选择器。这对我有用，希望对您有帮助。

Answer 2

解决了。我的函数语法错误...这对我有用：

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

请记住，我在本示例中使用的是createClass，而不是es6类。