react-native-datepicker真机时间选择器数字及AM/PM文本不显示问题

问题出在react-native-datepicker的spinner模式下，真机（尤其是iOS）的默认选择器文本颜色会和背景色冲突，虽然你设置了textStyle，但该属性并未覆盖到选择器滑块里的时间数字和AM/PM文本样式。

你需要在customStyles中添加针对选择器文本的样式配置，明确指定文本颜色：

import DatePicker from 'react-native-datepicker';

<DatePicker
  style={{marginBottom:20}}
  value={selectedTimeFrom}
  mode="time"
  is24Hour={false}
  date={selectedTimeFrom}
  display="spinner"
  format="h:mm A" 
  confirmBtnText="Confirm"
  cancelBtnText="Cancel"
  onDateChange={(time) => setSelectedTimeFrom(time)}
  showIcon={false}
  customStyles={{
    dateInput: {
      borderWidth: 1,
      borderRadius:8,
      marginTop:10,
      alignItems: 'flex-start', 
      color:'blue',
      backgroundColor:'#fff',
    },
    dateText: {
      fontSize:dynamicFontSize(3.5),
      color: '#000',
      alignSelf:'center',
    },
    btnTextConfirm: {
      color: '#5ce1e6',
      fontWeight: 'bold',
    },
    btnTextCancel: {
      color: 'black', 
    },
    textStyle: {
      color: 'black', 
    },
    // 添加以下两个样式，覆盖选择器滑块的文本颜色
    pickerText: {
      color: '#000',
    },
    pickerTextSelected: {
      color: '#000',
    },
  }}
/>

说明： #

• pickerText控制选择器中未被选中的文本颜色
• pickerTextSelected控制选择器中被选中的文本颜色
• 同时设置这两个属性可以确保所有状态下的时间数字、AM/PM文本都能在真机上正常显示

内容的提问来源于stack exchange，提问作者gurugagi