iOS端DateTimePickerModal设mode为datetime时不显示时间选择器

核心解决方案 #

• 移除display="inline"属性，或针对iOS平台单独屏蔽该属性
• 验证isDatetimePickerVisible状态是否正确切换为true
• 检查依赖版本兼容性，必要时调整组件版本

问题原因 #

react-native-modal-datetime-picker是基于@react-native-community/datetimepicker封装的模态组件，在iOS平台下，display="inline"属性与模态模式存在冲突——inline模式原本是给底层组件的内嵌显示设计的，套在modal组件中会导致iOS原生选择器无法正常渲染。

修改后的代码示例 #

方案1：平台差异化处理display属性

import { Platform } from 'react-native';

<DateTimePickerModal
  isVisible={isDatetimePickerVisible}
  mode="datetime"
  onConfirm={handleConfirmDate}
  onCancel={hideDatePicker}
  // Android保留inline，iOS不设置该属性
  display={Platform.OS === 'android' ? 'inline' : undefined}
  confirmTextIOS="Confirm"
  cancelTextIOS="Cancel"
/>

方案2：直接移除display属性（适合不需要inline的场景）

<DateTimePickerModal
  isVisible={isDatetimePickerVisible}
  mode="datetime"
  onConfirm={handleConfirmDate}
  onCancel={hideDatePicker}
  confirmTextIOS="Confirm"
  cancelTextIOS="Cancel"
/>

额外排查点 #

1. 状态验证：在触发显示选择器的函数中，打印isDatetimePickerVisible的值，确认状态已正确更新为true
2. 版本适配：若上述方案无效，尝试将react-native-modal-datetime-picker降级至17.1.0，配合@react-native-community/datetimepicker的7.6.1版本测试，新版本可能存在未适配的兼容性问题

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