首页 > 解决方案 > React Native react-native-datepicker 未显示某些日期

问题描述

我正在使用react-native-datepicker,似乎有些日期的字体颜色为透明,而其他日期则没有。我不确定出了什么问题,我有最新版本的日期选择器。当我选择一个不可见的日期时,我可以打印出正确的值,这意味着它正在工作......它只是没有显示。我附上了一张正在发生的事情的照片。

import React from 'react';
import DatePickerModal from 'react-native-datepicker';
import moment from 'moment';
import {Platform} from 'react-native';
import Colors from 'utils/Colors';

type DatePickerProps = {
  value: String,
  onDateChange: Function,
  datePickerRef: Object
};

const DatePicker = ({ value, onDateChange, datePickerRef }: DatePickerProps) => {
  if( Platform.OS === 'ios'){
    return (
      <DatePickerModal
        ref={datePickerRef}
        date={value}
        mode="date"
        placeholder="Select date"
        format="YYYY-MM-DD"
        maxDate={moment().subtract(18, "years")}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        showIcon={false}
        customStyles={dateInputStyles}
        onDateChange={onDateChange}
      />
    )} else {
      <DatePickerModal
        ref={datePickerRef}
        androidMode
        date={value}
        mode="date"
        placeholder="Select date"
        format="YYYY-MM-DD"
        maxDate={moment().subtract(18, "years")}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        showIcon={false}
        customStyles={dateInputStyles}
        onDateChange={onDateChange}
      />
  }}

const dateInputStyles = {
  dateTouchBody: {
    height: 28,
  },
  dateInput: {
    borderColor: Colors.Red,
    height: 28,
    alignItems: 'flex-end',
  },
  dateText: { color: Colors.Gray },
  placeholderText: { color: Colors.Gray  },
  btnTextCancel: { color: Colors.Gray },
  btnTextConfirm: { color: 'green' }
};
export default DatePicker;

日期不显示

标签: react-nativedatepicker

解决方案


这可能是与此相关的暗模式问题:https ://github.com/xgfe/react-native-datepicker/issues/365 。

您必须根据模式自定义颜色(需要安装react-native-dark-mode[ https://www.npmjs.com/package/react-native-dark-mode]),或者您可以将UIUserInterfaceStyle密钥设置LightInfo.plist


推荐阅读