React Native 鸿蒙实战datetimepicker 日期时间选择器在 HarmonyOS 上的接入与使用库版本react-native-oh-tpl/datetimepicker 9.0.0-beta.1OpenHarmony 适配版上游依赖react-native-community/datetimepicker 9.1.0适配仓库https://atomgit.com/CPF-RN/rntpc_datetimepicker验证环境RNOH 0.86.1对齐 React Native 0.86.3设备鸿蒙 PCOpenHarmony2in1 形态一、环境搭建React Native 鸿蒙环境搭建请参考官方文档RNOH 环境搭建指南本章不重复展开。搭建完成后确认 pnpm --version 输出 10.x 以上DevEco Studio 可正常创建鸿蒙工程即可。二、应用背景2.1 当前的应用场景与痛点日期选择、时间选择是表单填写、预约下单、提醒设置等场景中的高频需求。React Native 在 Android 和 iOS 上通过 react-native-community/datetimepicker 提供成熟的日期时间选择方案但鸿蒙系统使用完全不同的 ArkUI DatePicker / TimePicker 组件体系开发者如果自行适配需要对接鸿蒙 ArkUI 的 DatePicker、TimePicker、CalendarPicker 等原生组件API 与 RN 的 JS 层模型不同编写 ArkTS 原生 Fabric UI 组件桥接 JS 调用与系统日期选择器处理日期格式转换、模式切换date / time / datetime、显示样式spinner / inline / compact等参数映射配置 codegen spec、HAR 包编译、autolinking 注册等 RNOH 构建流程。2.2 为什么需要这个库react-native-oh-tpl/datetimepicker 是 RNOH 社区基于 react-native-community/datetimepicker 进行鸿蒙适配的三方库在 OpenHarmony 平台上通过 ArkTS 重新实现了原生层让 React Native 鸿蒙应用无需编写原生代码即可在 JS 层以与 Android / iOS 一致的 API 完成日期时间选择。2.3 解决什么问题一句话总结为 React Native 鸿蒙应用提供开箱即用的日期时间选择能力。具体包括多种日期选择模式date 日期 / time 时间多种显示样式spinner 滚轮 / inline 内联日历 / compact 紧凑 / default 自动选择日期范围限制通过 minimumDate / maximumDate 控制可选范围24 小时制支持is24Hour 参数选择结果实时回调onChange 返回选中日期年份选择支持startOnYearSelection 快速跳转年份。三、功能介绍功能说明适用场景日期选择mode“date”选择年月日生日、入职日期、截止日期时间选择mode“time”选择时分闹钟、提醒、预约时间内联日历display“inline”日历视图大屏设备、需要直观查看月份紧凑日历display“compact”小型日历空间受限的表单区域滚轮选择display“spinner”滚轮样式传统 iOS 风格交互日期范围限制minimumDate / maximumDate限制可选日期区间24 小时制is24Hourtrue国际化时间显示年份快选startOnYearSelection需要快速切换到特定年份四、使用方法4.1 引入三方库在 RNOH 工程中接入该库需要完成两个配置npm 依赖本地引入、HAR 包引用。该库支持 autolinking无需手动注册 Package。第一步添加 npm 依赖在 tester 的 package.json 的 dependencies 中添加{ dependencies: { react-native-community/datetimepicker: 9.1.0, react-native-oh-tpl/datetimepicker: file:../../node_modules/react-native-oh-tpl/datetimepicker } }react-native-community/datetimepicker 是上游 JS 层依赖提供类型定义和工具函数react-native-oh-tpl/datetimepicker 是鸿蒙适配版的原生实现。执行 pnpm install 拉取依赖。第二步添加 HAR 包引用在 harmony/oh-package.json5 的 dependencies 中添加 HAR 文件引用{ dependencies: { react-native-ohos/datetimepicker: file:../../../node_modules/react-native-oh-tpl/datetimepicker/harmony/datetimepicker.har } }注意 HAR 路径从 oh-package.json5 所在目录harmony/算起回退三级到根 node_modules。路径写错会导致 ohpm 安装失败。第三步修复 HAR 打包缺陷重要当前版本的 HAR 存在打包缺陷——缺少 DateTimePickerPackage.ets 文件且 index.ets 是旧版本缺少 export default DateTimePickerPackage直接使用会导致 ArkTS 编译报错。解决方法是从源码目录重建 HAR。先从 AtomGit 克隆适配仓库到 node_modulescd node_modules/react-native-oh-tpl/datetimepicker/harmony git clone https://atomgit.com/CPF-RN/rntpc_datetimepicker.git datetimepicker然后执行项目根目录下的 scripts/rebuild-har.js 脚本node scripts/rebuild-har.js该脚本会从克隆的源码目录完整重建 HAR 文件tar.gz 格式验证所有关键文件存在index.ets、DateTimePickerPackage.ets、RNDateTimePicker.ets、C 源码等验证 index.ets 包含正确的 export default DateTimePickerPackage自动清除 ohpm 缓存确保下次 Sync 时重新解压。执行完成后运行 ohpm install 重新解压 HAR然后 Clean Build 即可。4.2 核心 API该库导出一个 React 组件 DateTimePicker通过 props 控制行为import DateTimePicker from react-native-oh-tpl/datetimepicker; DateTimePicker value{new Date()} // 当前选中日期必传 modedate // 模式date | time displayspinner // 样式default | spinner | compact | inline onChange{(event, date) { // 选择变更回调 if (date) setDate(date); }} minimumDate{new Date(2020, 0, 1)} // 可选最小日期 maximumDate{new Date(2030, 11, 31)} // 可选最大日期 is24Hour{true} // 24 小时制 disabled{false} // 是否禁用 /注意display 参数在鸿蒙平台上会被映射为 displayIOS 传递给原生组件。当前 SDK 版本下spinner 和 default 样式会使用 CalendarPicker 替代详见 FAQ。4.3 完整示例代码以下是在 RNOH tester 工程中验证通过的完整示例DateTimePickerExample.tsx展示四种模式的日期时间选择器import React, {useState} from react; import { View, Text, StyleSheet, ScrollView, Platform, } from react-native; import DateTimePicker from react-native-oh-tpl/datetimepicker; function DateTimePickerCard({ title, mode, display, }: { title: string; mode: date | time; display: default | spinner | compact | inline; }) { const [date, setDate] useState(new Date()); const handleChange (event: any, selectedDate?: Date) { if (selectedDate) { setDate(selectedDate); } }; return ( View style{styles.card} Text style{styles.cardTitle}{title}/Text Text style{styles.cardValue} {mode date ? date.toLocaleDateString() : date.toLocaleTimeString()} /Text View style{styles.pickerContainer} DateTimePicker value{date} mode{mode} display{display} onChange{handleChange} is24Hour{true} style{{ flex: 1 }} / /View /View ); } export function DateTimePickerExample() { return ( ScrollView style{styles.container} Text style{styles.title}DateTimePicker Demo/Text Text style{styles.subtitle} Platform: {Platform.OS harmony ? HarmonyOS : Platform.OS} /Text DateTimePickerCard titleDate Picker (spinner) modedate displayspinner / DateTimePickerCard titleDate Picker (inline) modedate displayinline / DateTimePickerCard titleTime Picker (spinner) modetime displayspinner / DateTimePickerCard titleDate Picker (compact) modedate displaycompact / /ScrollView ); } const styles StyleSheet.create({ container: {flex: 1, padding: 16, backgroundColor: #F2F2F7}, title: {fontSize: 24, fontWeight: 700, marginBottom: 4, color: #000}, subtitle: {fontSize: 14, color: #666, marginBottom: 20}, card: { backgroundColor: #fff, borderRadius: 12, padding: 16, marginBottom: 16, }, cardTitle: {fontSize: 16, fontWeight: 600, color: #333, marginBottom: 4}, cardValue: {fontSize: 14, color: #007AFF, marginBottom: 12}, pickerContainer: { height: 200, alignItems: center, justifyContent: center, }, });运行效果页面显示四张白色圆角卡片分别展示 spinner 日期滚轮、inline 内联日历、spinner 时间滚轮和 compact 紧凑日历。选择日期后卡片内蓝色文字实时更新。重要DateTimePicker 是 Fabric 原生组件必须通过 style{{ flex: 1 }} 或其他方式指定尺寸否则 Yoga 布局引擎会计算为 0 高度导致组件不可见。五、FAQ5.1 常见问题Q1编译报 Module ‘…index’ has no default export这是 HAR 打包缺陷导致的。原始 HAR 中 index.ets 是旧版本只有 export * 导出缺少 export default DateTimePickerPackage。autolinking 生成的 RNOHPackagesFactory.ets 使用了 import DateTimePickerPackage from ‘react-native-ohos/datetimepicker’要求 index.ets 有默认导出。解决办法是从源码重建 HAR。正确的 index.ets 内容如下import { DateTimePickerPackage } from ./src/main/ets/DateTimePickerPackage export default DateTimePickerPackage export * from ./src/main/ets/RNDateTimePicker同时 HAR 中必须包含 DateTimePickerPackage.ets 文件该文件负责注册 RNDateTimePicker 组件构建器import { RNOHPackage, ComponentBuilderContext } from rnoh/react-native-openharmony; import { RNDateTimePicker } from ./RNDateTimePicker; Builder function buildDateTimePicker(ctx: ComponentBuilderContext) { RNDateTimePicker({ ctx: ctx.rnComponentContext, tag: ctx.tag, }) } export class DateTimePickerPackage extends RNOHPackage { createWrappedCustomRNComponentBuilderByComponentNameMap(): Mapstring, WrappedBuilder[ComponentBuilderContext] { return new Map().set(RNDateTimePicker, wrapBuilder(buildDateTimePicker)) } }执行 node scripts/rebuild-har.js 从源码目录完整重建 HAR 即可修复。Q2执行 rebuild-har.js 后 Sync仍然报 no default exportohpm 有缓存机制。即使 HAR 文件已更新只要包名 版本哈希没变ohpm 不会重新解压到 oh_modules编译时读到的仍然是旧文件。可以通过检查 oh_modules 中的 index.ets 来确认缓存是否生效# 如果输出没有 export default DateTimePickerPackage说明缓存未更新 cat harmony/oh_modules/react-native-ohos/datetimepicker/index.ets解决方法是手动清除 ohpm 缓存目录然后重新安装# 删除 ohpm 缓存的解压目录 rm -rf harmony/oh_modules/.ohpm/react-native-ohosdatetimepicker* # 删除 ohpm 创建的链接目录 rm -rf harmony/oh_modules/react-native-ohos/datetimepicker # 重新安装 ohpm installrebuild-har.js 脚本已内置自动清缓存步骤正常情况下无需手动操作。Q3页面打开了 DateTimePicker Demo但选择器区域空白看不到组件DateTimePicker 是 Fabric 原生组件没有 intrinsic size内在尺寸。如果不在 style 中指定宽高Yoga 布局引擎会将其计算为 0 高度组件虽然已渲染但完全不可见。错误写法无尺寸DateTimePicker value{date} modedate displayinline onChange{handleChange} /正确写法通过 flex: 1 填满父容器View style{{ height: 200 }} DateTimePicker value{date} modedate displayinline onChange{handleChange} style{{ flex: 1 }} / /View父容器必须有明确的高度height: 200DateTimePicker 通过 flex: 1 撑满该高度。如果父容器也没有固定高度需要一路向上确保布局链有确定的尺寸约束。Q4inline 和 compact 模式正常显示但 spinner 模式不渲染当前 HarmonyOS SDKtargetSdkVersion 6.0.0(20)中内置的 DatePicker 和 TimePicker 组件存在兼容性问题无法正常渲染。inline 和 compact 模式使用的是库自带的 CalendarPicker 组件ArkTS 自绘所以不受影响。问题出在 RNDateTimePicker.ets 的 build 方法中spinner 模式使用了系统 DatePicker// 以下代码在当前 SDK 版本下不渲染 DatePicker({ start: new Date(1970, 0, 0), end: new Date(2100, 0, 0), selected: this.selectDate }) .lunar(this.isLunar) .width(100%).height(100%) .onDateChange((value: Date) { ... })解决方案是将 spinner / default 模式的 DatePicker 和 time 模式的 TimePicker 统一替换为 CalendarPicker与 inline / compact 模式一致。修改 oh_modules 中的 RNDateTimePicker.ets 后重新执行 node scripts/rebuild-har.js 并 Clean Build。Q5HAR 安装失败ohpm Sync 报错检查 oh-package.json5 中 HAR 路径是否正确。路径从 harmony/ 目录算起到根 node_modules 需要回退三级react-native-ohos/datetimepicker: file:../../../node_modules/react-native-oh-tpl/datetimepicker/harmony/datetimepicker.har路径层级写错会导致 ohpm 找不到 HAR 文件。Q6真机安装失败HAP 安装报错用 DevEco Studio 打开工程进入 File Project Structure Signing Configs勾选 Automatically generate signature 后重新运行。5.2 库本身存在问题如何提交 Issue打开适配仓库 https://atomgit.com/CPF-RN/rntpc_datetimepicker 的 Issues 页面点击新建 Issue标题格式[Bug] 一句话现象例如 [Bug] DateTimePicker spinner 模式不渲染正文必须包含复现步骤 / 期望结果 / 实际结果 / 设备与系统版本 / RNOH 版本 / 最小复现代码、日志或截图提交后跟踪仓库维护者回复修复发布后关注对应 Tag 更新依赖版本。5.3 能自己解决如何提交 PRFork 适配仓库 https://atomgit.com/CPF-RN/rntpc_datetimepicker 到个人 AtomGit 账号git clone 自己的 fork基于 master 新建分支git checkout -b fix/xxx修改代码如 ArkTS 侧组件实现、JS 侧属性映射并 commitpush 到自己的 fork在原仓库发起 Pull RequestPR 描述写清问题背景 / 修改点 / 鸿蒙真机验证结果附运行截图等待维护者评审合入。六、其他内容6.1 总结react-native-oh-tpl/datetimepicker 为 React Native 鸿蒙应用补齐了日期时间选择能力。与 file-selectorTurboModule 命令式调用不同datetimepicker 是 Fabric UI 组件以声明式 JSX 标签的形式直接嵌入页面。接入时注意四点oh-package.json5 中 HAR 路径层级要正确、当前版本 HAR 存在打包缺陷需通过 rebuild-har.js 脚本重建、Fabric 组件必须通过 style 指定尺寸否则不可见、spinner 模式下内置 DatePicker / TimePicker 在当前 SDK 版本存在兼容性问题需替换为 CalendarPicker。建议生产环境锁定依赖版本遇到问题优先查看适配仓库 Issues。6.2 与 file-selector 的对比维度file-selectordatetimepicker组件类型TurboModule原生模块Fabric UI 组件原生视图调用方式FileSelector.Show({…}) 命令式DateTimePicker … / 声明式注册方式需手动创建本地 Package支持 autolinking 自动注册HAR 状态基于旧版框架需本地替代有打包缺陷需 rebuild-har.js 修复尺寸要求无非 UI 组件必须指定 style{{ flex: 1 }}6.3 参考链接RNOH 社区入口和三方库资源统一在这里RNOH 环境搭建指南datetimepicker 鸿蒙适配仓库react-native-community/datetimepicker 上游仓库React Native 官方文档本文转自网络如有侵权请联系删除。