Блог

Мое приложение React Native (iOS) использует пакет модального средства выбора даты и времени React Native. У меня есть кнопка, при нажатии на которую должен открываться календарь, чтобы я мог выбрать дату.

Однако, когда я нажимаю на кнопку, я получаю следующее модальное окно:

Если я затем нажму на дату в этом окне, я увижу календарь:

Я хочу, чтобы календарь отображался при первоначальном нажатии кнопки.

Вот соответствующий код:

   const [isDatePickerVisible, setIsDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setIsDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setIsDatePickerVisibility(false);
  };

  return (
    <View>
      <Text style={styles.inputTitle}>DATE OF BIRTH</Text>
      <View style={styles.dateInput}>
        <TextInput
           editable={false}
           style={styles.input}
           value={dateOfBirth}
        />
        <Button transparent onPress={showDatePicker}>
          <Icon
            type="FontAwesome5"
            name={'calendar-alt'}
          />
        </Button>
        <DateTimePickerModal
          isVisible={isDatePickerVisible}
          mode="date"
          onConfirm={handleDateSelection}
          onCancel={hideDatePicker}
        />
      </View>
    </View>
  )
 

Кто-нибудь еще видел такое поведение? Или кто-нибудь может подсказать, что я могу с этим поделать?

UIDatePicker теперь имеет свойство с именем datePickerStyle. Вы можете выбирать между .compact и .inline — оба новые для iOS 14 — или .wheel, который является старым стилем, который мы знаем уже более десяти лет.

Ссылка

вы просматриваете .compact стиль по умолчанию

библиотека react-native-modal-datetime-picker исправила эту проблему

проверьте версию своей библиотеки и обновите версию библиотеки> 9.0.0

Исправлена поддержка iOS 14, по умолчанию для отображения даты и времени в сообществе установлено значение «отображать» (при необходимости вы все равно можете переопределить его вручную).

https://github.com/mmazzarolo/react-native-modal-datetime-picker/releases/tag/v9.0.0

Примечание: вам нужно как минимум @react-native-community/datetimepicker@3.0.0 чтобы эта версия работала корректно.

быстрое решение без обновления. Добавить в AppDelegate.m (но у него проблема с выравниванием)

 if (@available(iOS 14, *)) {
    UIDatePicker *picker = [UIDatePicker appearance];
    picker.preferredDatePickerStyle = UIDatePickerStyleWheels
 }