javascript - react native : How do you implement DatePickerAndroid?

Question

根据 RN 文档，您必须调用异步/等待函数才能打开 Android 日期选择器。我尝试安装 Async to generator transform Babel preset 并使用

添加 .babelrc 文件

{
“插件”:[“转换异步到生成器”]
}

但这似乎只是在使用标签添加任何 RN 组件时抛出意外的 token 错误(例如 会抛出意外的 token 错误)。这就是我打开 Android 日期选择器的函数的样子

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

最后添加到你的 View 容器:

       {
          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 的不同选择器。这对我有用，希望对您有所帮助。