欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

---

在医疗照护领域，家属参与患者的健康管理是提高治疗效果的重要因素。今天我们来深入分析一个基于 React Native 开发的家属患者监控应用，该应用集成了患者信息管理、生命体征监测、用药记录管理和异常提醒等功能，为家属提供了便捷的患者监控平台。

通过类型定义确保数据结构的一致性和代码的可维护性

该应用采用了 React Native 现代开发技术栈，主要包括：

• React Hooks：使用 useState 管理应用状态，useEffect 处理副作用逻辑（如自动异常检测和提醒）
• TypeScript：通过类型定义确保数据结构的一致性和代码的可维护性
• 跨平台组件：使用 SafeAreaView、TouchableOpacity、ScrollView、Modal 等实现跨平台兼容的用户界面
• 响应式布局：利用 Dimensions API 获取屏幕尺寸，确保在不同设备上的良好显示效果
• 基础组件：使用 View、Text、TextInput 等构建用户界面

表示用药记录，包含 ID、患者 ID、药物名称、剂量、时间和日期

应用通过 TypeScript 定义了四个核心数据类型，构建了完整的家属患者监控数据模型：

• Patient：表示患者信息，包含 ID、姓名、年龄、性别和病情
• VitalSign：表示生命体征，包含 ID、患者 ID、日期、血压、心率、体温和异常状态
• MedicationRecord：表示用药记录，包含 ID、患者 ID、药物名称、剂量、时间和日期
• AlertNotification：表示异常提醒，包含 ID、患者 ID、消息内容和时间戳

这种强类型定义不仅提高了代码的可读性和可维护性，也为鸿蒙跨端适配提供了清晰的数据结构映射基础。

动态数据（生命体征、用药记录、异常提醒）通过 useState 管理，并支持添加和更新

应用采用了基于 useState 的轻量级状态管理方案，为不同功能模块分别管理状态：

• 静态数据（患者列表）通过初始化的 useState 直接存储
• 动态数据（生命体征、用药记录、异常提醒）通过 useState 管理，并支持添加和更新
• 交互状态（选中的患者、模态框可见性）通过独立的 useState 管理

此外，应用使用 useEffect 钩子监听生命体征的变化，当检测到异常生命体征时自动生成异常提醒并向用户发送通知，实现了数据驱动的业务逻辑。

---

应用支持患者信息的展示和选择，通过列表展示患者的基本信息，包括姓名、年龄、性别和病情。家属可以点击选择患者进行查看，为监控提供明确的目标对象。

生命体征监测是应用的核心功能，主要包括：

• 展示患者的生命体征数据，包括血压、心率和体温
• 自动检测异常生命体征
• 当检测到异常时生成提醒通知
• 查看详细的生命体征信息

应用通过 useEffect 实现了自动异常检测和提醒功能，当生命体征数据发生变化时，会自动检查是否存在异常，并生成相应的提醒。

用药记录管理功能为家属提供了患者的用药情况：

• 展示患者的用药记录，包括药物名称、剂量、时间和日期
• 查看详细的用药记录信息

异常提醒功能是应用的重要组成部分：

• 当检测到异常生命体征时自动生成提醒
• 展示提醒信息和时间戳
• 支持清除提醒

应用通过 useEffect 实现了自动提醒功能，当生命体征数据发生变化时，会自动检查是否存在异常，并生成相应的提醒。

应用通过卡片式布局展示患者信息、生命体征、用药记录和异常提醒，使用 TouchableOpacity 组件实现交互功能，点击卡片后可以查看详细信息或执行相关操作。此外，应用使用 Modal 组件展示详细信息，提升了用户体验。

---

组件映射

在鸿蒙 OS 适配过程中，需要注意以下组件映射：

• SafeAreaView：在鸿蒙上需要使用 SafeArea 组件或自定义适配
• TouchableOpacity：对应鸿蒙的 Button 或 Text 组件配合点击事件
• ScrollView：对应鸿蒙的 ListContainer 或 Scroll 组件
• Modal：对应鸿蒙的 Dialog 组件
• Alert：对应鸿蒙的 ToastDialog 或 AlertDialog 组件
• TextInput：对应鸿蒙的 TextField 组件

鸿蒙 OS 对 Flexbox 布局的支持与 React Native 基本一致，但在细节上仍需注意：

• 确保样式命名符合鸿蒙规范
• 调整间距和尺寸以适应鸿蒙设备的显示特性
• 注意字体大小和行高的适配
• 对于表单输入控件，需要适配鸿蒙的输入框样式和交互方式

在鸿蒙跨端开发中，性能优化是一个重要考虑因素：

• 使用 memo 优化组件渲染，特别是对于患者列表、生命体征列表等重复渲染的场景
• 合理使用 useCallback 和 useMemo 减少不必要的计算
• 优化图片资源，考虑使用鸿蒙的资源加载机制
• 注意 useEffect 的依赖项，避免不必要的副作用执行
• 对于生命体征数据的检测，考虑使用更高效的算法

---

应用通过 useEffect 实现了数据驱动的异常检测机制，当生命体征数据发生变化时自动触发检测和提醒逻辑。这种方式不仅代码简洁，而且确保了异常数据能够被及时发现和处理。

应用从多个维度监控患者的健康状况：

• 生命体征：监测患者的血压、心率和体温
• 用药记录：跟踪患者的用药情况
• 异常提醒：及时通知家属患者的异常情况

这种多维度的监控模式为患者的健康管理提供了全方位的支持。

应用设计了专门的家属参与机制，让家属能够：

• 查看患者的详细信息
• 了解患者的生命体征数据
• 掌握患者的用药情况
• 及时收到患者的异常提醒

应用采用了清晰的模块化设计：

• 功能按模块划分（患者管理、生命体征监测、用药记录管理、异常提醒）
• 组件职责单一，便于维护和扩展
• 状态管理逻辑与 UI 渲染分离

Base64 图标库

应用使用 Base64 编码的图标，这种方式有几个优点：

• 减少网络请求，提高加载速度
• 避免图标资源的跨平台适配问题
• 减小应用包体积

虽然示例中使用的是占位 Base64 编码，但实际应用中可以使用真实的图标编码。

---

文件结构

示例代码集中在 App.tsx 文件中，适合小型应用。对于大型应用，建议按功能模块拆分文件：

• /components：存放可复用组件，如患者卡片、生命体征卡片、用药记录卡片等

• /types：存放类型定义，如 Patient、VitalSign、MedicationRecord、AlertNotification 等

• /hooks：存放自定义 hooks，如异常检测逻辑、提醒管理逻辑等

• /services：存放 API 调用和业务逻辑，如数据存储、推送服务等

• /utils：存放工具函数，如日期处理、数据格式化等

• 命名规范：变量和函数命名清晰，符合语义化要求

• 类型安全：使用 TypeScript 确保类型安全

• 错误处理：通过条件判断处理可能的异常情况

• 注释：代码结构清晰，关键部分有适当注释

• 性能考虑：合理使用 React Hooks，避免不必要的渲染和计算

应用架构具有良好的扩展性：

• 可以轻松添加新的患者和生命体征监测指标
• 可以集成真实的后端 API，实现数据的持久化存储
• 可以扩展支持更多的患者监控功能，如饮食记录、运动监测等
• 可以集成推送通知服务，实现更可靠的异常提醒
• 可以添加数据可视化功能，如生命体征趋势图表等

---

这个家属患者监控应用展示了如何使用 React Native 构建功能完备的患者监控工具，特别是在数据驱动的异常检测和多维度患者监控方面的实践具有重要参考价值。通过跨端开发技术，可以在不同平台为家属提供一致的服务体验。

随着远程医疗的发展和人们对健康管理重视程度的提高，这类应用的需求将不断增长。未来可以考虑：

• 集成更多患者监控功能，如远程视频通话、智能设备接入等
• 与医院的电子病历系统对接，实现患者信息的自动同步
• 利用 AI 技术根据患者的生命体征数据提供健康建议
• 支持多家属同时监控，让更多家人参与到患者的健康管理中来
• 开发配套的医护端应用，实现医患家属三方的协同管理

React Native 鸿蒙跨端开发代表了移动应用开发的未来趋势，通过一套代码库覆盖多个平台，不仅可以降低开发成本，还可以确保用户体验的一致性。在医疗应用领域，这种开发模式尤为重要，因为它可以让开发者更专注于核心功能的实现，而不是平台差异的处理。

---

家属患者监控是智慧医疗在居家照护场景的核心落地形态，聚焦“患者信息管理-生命体征监测-用药记录查看-异常提醒推送”全流程的居家照护服务逻辑，既要保证血压、心率等生命体征数据的准确性与实时性，又需兼顾家属查看的便捷性与异常提醒的及时性，同时实现多端服务体验的一致性。本文基于这套 React Native 家属患者监控应用代码，从架构设计、核心业务逻辑、鸿蒙跨端适配三个维度，系统解读居家照护场景的跨端开发逻辑与技术要点，重点剖析 React Native 与鸿蒙系统的适配底层逻辑和落地实践方案，尤其针对生命体征异常检测、用药记录展示、异常提醒处理等核心交互的跨端实现进行深度拆解。

一、生命体征展示、异常提醒推送等核心逻辑的跨端复用

该家属患者监控应用基于 React Native 函数式组件 + TypeScript 强类型架构构建，核心依赖 React Native 原生基础组件（SafeAreaView、ScrollView、TouchableOpacity、Modal 等）与 useState/useEffect 核心 Hooks，未引入第三方 UI 框架或复杂状态管理库。这种极简架构是家属患者监控这类“强数据监测、轻实时交互”场景实现鸿蒙跨端的核心优势——轻量意味着适配成本更低，且能最大程度保证多端居家照护服务流程逻辑的一致性，尤其适合患者信息管理、生命体征展示、异常提醒推送等核心逻辑的跨端复用。

从跨端技术底层逻辑来看，React Native 以“JS 桥接层（JS Bridge）”为核心实现跨端能力：前端编写的 JSX 组件与家属患者监控业务逻辑，通过桥接层映射为不同平台的原生组件，iOS 端映射为 UIKit 体系、Android 端映射为 View 体系，而鸿蒙（HarmonyOS）端则通过 React Native for HarmonyOS 适配层，完成 React Native 组件/API 与鸿蒙 ArkUI 组件/API 的双向映射。该应用的代码结构完全遵循跨端开发规范：无平台专属硬编码、状态管理基于 React 原生 Hooks、样式采用跨端通用的 Flex 布局，从根源上消除了鸿蒙适配的技术壁垒，同时保证生命体征异常检测、用药记录查看、异常提醒处理等核心居家照护管理流程逻辑在多端的一致性。

值得注意的是，应用核心的生命体征异常检测（useEffect 监听逻辑）、异常提醒清除（handleClearAlert）、用药记录查看（handleViewMedicationRecord）逻辑均为纯 JS 状态操作与数组关联查询实现，无任何平台相关依赖，这是跨端复用的关键——鸿蒙端可通过 JS 引擎直接执行该逻辑，无需适配任何原生能力，保证居家照护管理规则在多端的完全一致，避免因平台差异导致的异常提醒推送失败、生命体征展示错误等核心问题。

---

1. 关联患者ID，包含提醒信息、时间戳字段

应用通过 TypeScript 接口定义了 Patient（患者）、VitalSign（生命体征）、MedicationRecord（用药记录）、AlertNotification（异常提醒）四类核心数据类型，字段设计精准匹配居家照护全流程数据需求，且所有字段均为 JS 基础数据类型（string/number/boolean），为跨端适配奠定基础：

• Patient 涵盖患者ID、姓名、年龄、性别、病情，年龄（age: number）为数值类型，病情（condition: string）为标准化字符串类型，在鸿蒙端适配层可直接映射为 ArkTS 的对应类型，避免多端数据类型解析差异导致的患者信息展示错误，尤其在“李先生 45岁 男 高血压”这类核心患者信息的传递上，保证了跨端的数据准确性；
• VitalSign 作为核心监测数据模型，新增异常状态字段（isAbnormal: boolean），布尔值为 JS/ArkTS 通用基础类型，生命体征异常状态的展示与检测逻辑跨端统一，血压（bloodPressure）、心率（heartRate）、体温（temperature）为标准化字符串，保证监测数据展示的跨端一致性；
• MedicationRecord 包含药品名称、剂量、服用时间、日期等核心字段，均为标准化字符串类型，鸿蒙端适配层可直接解析，用药记录的展示规则跨端统一，符合家属查看用药信息的习惯；
• AlertNotification 关联患者ID，包含提醒信息、时间戳字段，均为标准化字符串，异常提醒的内容与时间展示逻辑跨端统一，保证家属及时接收异常提示。

这种强类型+场景化的数据模型设计，在跨端场景下保证了数据结构的一致性——鸿蒙端适配层可直接解析 TypeScript 类型定义，与 ArkTS 中的数据模型形成精准映射，避免多端数据格式不一致导致的患者信息展示异常、生命体征异常检测错误等核心问题，是家属患者监控场景跨端落地的基础保障。

2. 采用 useState + useEffect 组合实现多维度状态管理

应用采用 useState + useEffect 组合实现多维度状态管理，核心状态均具备跨端复用的特性，且针对家属患者监控场景做了适配性设计：

• 核心基础数据状态（patients）为只读设计，适配层自动映射为鸿蒙的 @State 响应式状态，患者列表的展示逻辑跨端统一，保证基础患者信息的一致性；
• 动态业务数据状态（vitalSigns/medicationRecords/alertNotifications）支持新增/删除/过滤操作（setVitalSigns/setMedicationRecords/setAlertNotifications），数组过滤（vitalSigns.filter）、数组扩展运算符（[...alertNotifications, newAlert]）、数组映射更新均为 ES6+ 标准语法，鸿蒙端直接执行，数据新增/删除/状态更新的规则跨端一致，且异常检测逻辑绑定在 vitalSigns 状态变化之后，保证多端异常提醒推送的准确性；
• 交互状态（selectedPatient/isModalVisible/modalContent）维护选中医患、弹窗显隐与内容，selectedPatient 为字符串/空值赋值，弹窗状态为基础布尔值/字符串赋值，鸿蒙端直接执行，医患选择、详情弹窗展示的交互逻辑跨端统一；
• 副作用监听（useEffect）实现生命体征异常自动检测，依赖数组（[vitalSigns]）触发逻辑为 React 原生机制，鸿蒙端适配层会将 useEffect 映射为 ArkTS 的 @Watch 装饰器或 aboutToAppear 生命周期，异常检测的触发规则跨端一致，保证多端异常提醒推送的实时性。

---

1. 家属患者监控专属样式的跨端适配

应用在基础样式之上新增患者卡片、生命体征卡片、用药记录卡片、异常提醒卡片专属样式，核心样式设计既遵循跨端兼容原则，又针对家属查看患者信息的操作习惯做了特殊优化，适配鸿蒙系统无明显改造成本：

• Flex 布局的跨端统一：从患者卡片的“图标+信息”、生命体征卡片的“图标+信息+异常标识”，到用药记录卡片的“图标+信息”、异常提醒卡片的“图标+信息+清除按钮”布局，全量采用 Flex 布局体系——生命体征卡片使用 flexDirection: 'row' + alignItems: 'center' 横向布局，异常标识（⚠️）独立排布，保证家属快速识别异常状态；异常提醒卡片使用 flexDirection: 'row' + alignItems: 'center' 横向布局，“清除”按钮独立排布，方便家属处理异常提醒。Flex 作为 W3C 标准布局方案，在鸿蒙端可被适配层直接解析为 ArkUI 的 Flex 布局，无需重构任何布局逻辑，仅需保证样式属性命名与 React Native 规范一致，尤其在生命体征展示、异常提醒处理等核心居家照护交互区域的布局上，Flex 布局的跨端一致性表现突出；
• 家属患者监控专属样式的跨端适配：
  • 异常生命体征卡片样式（abnormalSignCard：borderLeftWidth: 4 + borderLeftColor: '#ef4444'）为通用样式属性，鸿蒙端适配层会将边框属性转换为 ArkUI 的 border 相关属性，异常生命体征的左侧红色警示边框视觉效果跨端统一，帮助家属快速识别异常数据；
  • 异常提醒卡片样式（alertCard：backgroundColor: '#fee2e2'）采用浅红背景色，为通用样式属性，鸿蒙端适配层直接解析，异常提醒的视觉警示效果跨端统一，符合家属对异常信息的视觉感知习惯；
  • 清除按钮样式（clearButton）采用红色背景（#ef4444）、小尺寸内边距设计，为通用样式属性，鸿蒙端适配层直接解析，按钮的视觉辨识度与点击区域跨端统一，方便家属快速清除异常提醒；
  • 选中医患卡片样式（selectedCard：borderWidth: 2 + borderColor: '#0284c7'）为通用样式属性，鸿蒙端适配层直接解析，选中医患的高亮边框视觉效果跨端统一，帮助家属快速识别选择状态；
• 屏幕适配与层级兼容：Dimensions.get('window') 获取设备宽高的 API 在鸿蒙端已完成原生映射，为不同尺寸鸿蒙设备（手机、平板）的自适应布局预留基础，尤其适配平板设备的患者数据大屏展示场景；shadow + elevation 的双层阴影设计，鸿蒙系统对 elevation 属性的支持与 Android 端完全兼容，保证各类卡片、信息卡片的视觉层级跨端统一，同时阴影透明度（0.1）的低饱和度设计，避免视觉干扰，符合家属查看患者医疗数据的视觉习惯；
• 安全区域适配：SafeAreaView 组件在鸿蒙端已适配为 ArkUI 的 SafeArea 组件，保证头部家属患者监控标题区域在不同鸿蒙设备上的展示完整性，避免标题被刘海屏、全面屏遮挡，尤其适配家属的视觉聚焦习惯。

---

（1）患者信息管理组件

患者信息管理是家属患者监控的基础功能，核心适配逻辑如下：

• 患者列表渲染采用 map 方法遍历 patients 数组，该逻辑为纯 JS 数组操作，鸿蒙端通过 JS 引擎直接执行，列表渲染的顺序与患者信息展示的完整性跨端一致，保证患者信息的准确展示；
• 患者选择逻辑（handleSelectPatient）包含状态更新（setSelectedPatient）与弹窗反馈（Alert.alert），状态更新为基础字符串赋值，弹窗反馈转换为鸿蒙 AlertDialog 组件，选择操作的反馈逻辑跨端一致。

（2）生命体征展示与异常检测组件

生命体征展示是家属患者监控的核心数据展示功能，核心适配逻辑如下：

• 生命体征列表渲染采用 map 方法遍历 vitalSigns 数组，异常状态样式绑定（sign.isAbnormal && styles.abnormalSignCard）为纯 JS 条件渲染，鸿蒙端直接执行，异常生命体征的视觉警示效果跨端统一；
• 生命体征详情查看逻辑（handleViewVitalSigns）包含数据过滤（vitalSigns.filter）、弹窗内容拼接、弹窗显隐控制，数据过滤为 JS 原生数组方法，弹窗内容拼接为纯 JS 模板字符串操作，弹窗显隐控制为基础状态赋值，鸿蒙端直接执行，详情展示的逻辑跨端统一；
• 生命体征异常自动检测逻辑（useEffect）包含数据过滤（vitalSigns.filter）、异常提醒新增（setAlertNotifications）、弹窗反馈，数据过滤为 JS 原生数组方法，异常提醒新增使用数组扩展运算符，弹窗反馈转换为鸿蒙 AlertDialog 组件，异常检测与提醒推送的逻辑跨端一致。

（3）用药记录与异常提醒组件

用药记录查看与异常提醒处理是家属患者监控的核心交互功能，核心适配逻辑如下：

• 用药记录列表渲染采用 map 方法遍历 medicationRecords 数组，该逻辑为纯 JS 数组操作，鸿蒙端直接执行，用药记录的展示顺序与内容跨端一致；
• 用药记录详情查看逻辑（handleViewMedicationRecord）包含数据查找（medicationRecords.find）、弹窗内容拼接、弹窗显隐控制，数据查找为 JS 原生数组方法，鸿蒙端直接执行，详情展示的逻辑跨端统一；
• 异常提醒列表渲染采用 map 方法遍历 alertNotifications 数组，清除按钮的点击回调（handleClearAlert）包含数据过滤（alertNotifications.filter）与弹窗反馈，数据过滤为 JS 原生数组方法，弹窗反馈转换为鸿蒙 AlertDialog 组件，异常提醒清除的逻辑跨端一致；
• 异常提醒详情查看逻辑（handleViewAlert）包含数据查找（alertNotifications.find）、弹窗内容拼接、弹窗显隐控制，数据查找为 JS 原生数组方法，鸿蒙端直接执行，详情展示的逻辑跨端统一。

---

1. 异常数据过滤逻辑

useEffect 监听 vitalSigns 状态变化实现的异常检测逻辑，是家属患者监控的核心预警机制，实现了“异常数据过滤-提醒构造-状态更新-反馈提示”的全流程异常处理，核心适配逻辑如下：

• 异常数据过滤逻辑（vitalSigns.filter(sign => sign.isAbnormal)）为 JS 原生数组方法，无任何平台依赖，鸿蒙端直接执行，异常数据筛选的规则跨端一致，保证异常提醒推送的准确性；
• 异常提醒构造逻辑（newAlert）采用日期格式化（new Date().toLocaleString()），为纯 JS 日期处理操作，鸿蒙端直接执行，时间戳的生成规则跨端一致；
• 状态更新逻辑（setAlertNotifications([...alertNotifications, newAlert])）使用数组扩展运算符，鸿蒙端直接执行，异常提醒新增的规则跨端一致；
• 反馈提示逻辑（Alert.alert）转换为鸿蒙 AlertDialog 组件，提示文案为纯 JS 字符串，鸿蒙端直接执行，提示展示的逻辑跨端一致。

2. 异常提醒清除全流程逻辑

handleClearAlert 是家属患者监控的核心交互机制，实现了“提醒过滤-状态更新-反馈提示”的全流程提醒处理，核心适配逻辑如下：

• 提醒过滤逻辑（alertNotifications.filter(a => a.id !== alertId)）为 JS 原生数组方法，鸿蒙端直接执行，提醒清除的规则跨端一致，保证异常提醒列表的更新准确性；
• 状态更新逻辑（setAlertNotifications）为基础数组赋值，鸿蒙端直接执行，状态更新的规则跨端一致；
• 反馈提示逻辑（Alert.alert）转换为鸿蒙 AlertDialog 组件，提示文案为纯 JS 字符串，鸿蒙端直接执行，提示展示的逻辑跨端一致。

应用使用的核心 API 均为 React Native 跨端兼容 API，在鸿蒙端可无缝适配，且针对家属患者监控场景做了适配性验证：

• 数组 API：map/filter/find/扩展运算符等数组方法为 JS 原生 API，鸿蒙端通过 JS 引擎直接执行，无需适配，保证患者/生命体征/用药记录/异常提醒列表的渲染、查找、新增、删除等核心逻辑的跨端一致性；
• 字符串 API：字符串拼接、模板字符串等操作为 JS 原生 API，鸿蒙端直接执行，保证弹窗内容拼接、异常提醒信息展示等核心逻辑的跨端一致性；
• 日期 API：new Date().toLocaleString() 等日期处理 API 为 JS 原生 API，鸿蒙端直接执行，保证异常提醒时间戳生成的跨端一致性；
• 交互 API：TouchableOpacity 的 onPress 回调、Alert.alert 弹窗、Modal 组件的核心属性，在鸿蒙端均已完成适配，点击交互、弹窗反馈、模态框展示的逻辑跨端一致，符合家属的操作习惯；
• 样式 API：StyleSheet.create 封装的样式规则，适配层转换为 ArkUI 的样式对象，尤其异常生命体征卡片的条件样式绑定逻辑，鸿蒙端可直接解析，保证异常状态的视觉适配跨端统一；
• 副作用 API：useEffect 监听状态变化的机制，鸿蒙端适配层映射为 ArkTS 的 @Watch 装饰器或生命周期方法，异常检测的触发规则跨端一致，保证多端异常提醒推送的实时性。

---

该家属患者监控应用作为智慧医疗居家照护场景核心模块，适配鸿蒙系统的成本极低，核心适配思路与技术要点如下：

应用核心的生命体征异常检测、异常提醒清除、用药记录查看、患者选择等逻辑均为纯 JS 实现，无任何平台相关依赖，这是跨端复用的最大优势——鸿蒙端可通过 JS 引擎直接执行该逻辑，无需适配任何原生能力。在生产环境中扩展实时数据同步、用药提醒、健康报告生成等逻辑时，新增规则仍为纯 JS 逻辑（实时数据同步可通过原生模块封装鸿蒙网络 API，核心业务逻辑复用），鸿蒙端可直接复用，仅需保证规则逻辑的通用性，无需考虑平台差异，这也是家属患者监控场景跨端开发的核心优势。

该应用当前的列表渲染采用基础 map 方法，在生产环境中若生命体征/用药记录/异常提醒数据量较大（如超过100条生命体征、50条用药记录、20条异常提醒），可替换为 React Native 的 FlatList 高性能列表组件——FlatList 在鸿蒙端已完成深度适配，支持虚拟化列表渲染，其核心属性（data/renderItem/keyExtractor）与 React Native 端完全一致，且 FlatList 的 renderItem 中可直接复用现有卡片样式与异常状态条件样式绑定逻辑，仅需少量调整即可适配鸿蒙端的性能优化策略，保证列表的滚动性能，尤其适合长期居家照护产生的海量监测数据展示场景。

鸿蒙系统有自身的居家照护场景友好型设计规范，在适配时可通过条件编译实现差异化样式，既保证遵循鸿蒙设计规范，又能保留现有代码的完整性与场景友好特性：

// 鸿蒙端家属患者监控样式差异化适配示例
import { Platform } from 'react-native';
const isHarmonyOS = Platform.OS === 'harmony';

const adaptiveStyles = {
  card: {
    ...styles.card,
    backgroundColor: isHarmonyOS ? '#e0f7fa' : '#f0f9ff',
    borderRadius: isHarmonyOS ? 14 : 12,
    padding: isHarmonyOS ? 20 : 16, // 鸿蒙端增大内边距，更适合家属查看
  },
  abnormalSignCard: {
    ...styles.abnormalSignCard,
    borderLeftWidth: isHarmonyOS ? 5 : 4, // 鸿蒙端增大异常边框宽度
    borderLeftColor: isHarmonyOS ? '#dc2626' : '#ef4444',
  },
  alertCard: {
    ...styles.alertCard,
    backgroundColor: isHarmonyOS ? '#fecdd3' : '#fee2e2', // 鸿蒙端调整提醒背景色
    padding: isHarmonyOS ? 20 : 16,
  },
  clearButton: {
    ...styles.clearButton,
    paddingHorizontal: isHarmonyOS ? 16 : 12, // 鸿蒙端增大清除按钮点击区域
    paddingVertical: isHarmonyOS ? 8 : 6,
  }
};

这种轻量级的差异化适配，既能保证符合鸿蒙的居家照护场景友好设计规范，又能保留现有代码的完整性，尤其在生命体征卡片、异常提醒卡片、清除按钮等核心居家照护交互组件的样式适配中，效果显著，同时维持了家属患者监控场景清晰、易识别的视觉调性。

---

该 React Native 家属患者监控应用实现了患者信息管理、生命体征监测、用药记录查看、异常提醒推送等核心智慧医疗服务功能，代码结构符合跨端开发规范，可低成本适配鸿蒙系统。针对生产环境落地，可做以下优化：

1. 实时数据同步对接：通过 React Native 原生模块封装鸿蒙的 MQTT/WebSocket API，实现生命体征数据的实时同步，核心异常检测逻辑可完全复用现有代码，仅需对接鸿蒙的实时通信原生 API，提升居家照护的实时监测能力；
2. 用药提醒功能扩展：新增用药提醒数据模型与 useEffect 监听逻辑，基于用药时间自动推送提醒，该逻辑为纯 JS 日期比较与状态更新，鸿蒙端直接执行，无需适配原生能力，提升居家照护的用药管理精细化程度；
3. 健康报告生成：新增健康报告数据模型与生成逻辑，基于生命体征数据自动生成日报/周报，该逻辑为纯 JS 数组统计与字符串拼接，鸿蒙端直接执行，实现患者健康状况的可视化展示；
4. 患者数据云端同步：对接智慧医疗云平台接口，实现患者信息、生命体征、用药记录、异常提醒的云端存储与多端同步，数据同步逻辑为纯 JS 数组操作，鸿蒙端直接执行，保证居家照护数据的跨设备一致性；
5. 紧急呼叫功能：通过 React Native 原生模块封装鸿蒙的电话/短信 API，实现异常状态下的紧急呼叫，核心异常检测逻辑可复用，仅需扩展原生通信能力，提升居家照护的应急处理能力。

---

真实演示案例代码：

// App.tsx
import React, { useState, useEffect } from 'react';
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, ScrollView, Dimensions, Alert, TextInput, Modal } from 'react-native';

// Base64 图标库
const ICONS_BASE64 = {
  vitalSigns: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  medication: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  alert: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  family: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
};

const { width, height } = Dimensions.get('window');

// 患者类型
type Patient = {
  id: string;
  name: string;
  age: number;
  gender: string;
  condition: string;
};

// 生命体征类型
type VitalSign = {
  id: string;
  patientId: string;
  date: string;
  bloodPressure: string;
  heartRate: string;
  temperature: string;
  isAbnormal: boolean;
};

// 用药记录类型
type MedicationRecord = {
  id: string;
  patientId: string;
  medication: string;
  dosage: string;
  time: string;
  date: string;
};

// 异常提醒类型
type AlertNotification = {
  id: string;
  patientId: string;
  message: string;
  timestamp: string;
};

// 家属查看患者信息应用组件
const FamilyPatientMonitorApp: React.FC = () => {
  const [patients] = useState<Patient[]>([
    {
      id: '1',
      name: '李先生',
      age: 45,
      gender: '男',
      condition: '高血压'
    },
    {
      id: '2',
      name: '王女士',
      age: 32,
      gender: '女',
      condition: '糖尿病'
    }
  ]);

  const [vitalSigns, setVitalSigns] = useState<VitalSign[]>([
    {
      id: '1',
      patientId: '1',
      date: '2023-12-01',
      bloodPressure: '120/80',
      heartRate: '72',
      temperature: '36.5',
      isAbnormal: false
    },
    {
      id: '2',
      patientId: '1',
      date: '2023-12-02',
      bloodPressure: '140/90',
      heartRate: '85',
      temperature: '37.2',
      isAbnormal: true
    }
  ]);

  const [medicationRecords, setMedicationRecords] = useState<MedicationRecord[]>([
    {
      id: '1',
      patientId: '1',
      medication: '降压药',
      dosage: '1片',
      time: '08:00',
      date: '2023-12-01'
    },
    {
      id: '2',
      patientId: '1',
      medication: '降糖药',
      dosage: '2片',
      time: '12:00',
      date: '2023-12-01'
    }
  ]);

  const [alertNotifications, setAlertNotifications] = useState<AlertNotification[]>([
    {
      id: '1',
      patientId: '1',
      message: '血压异常，请及时处理',
      timestamp: '2023-12-02 10:00'
    }
  ]);

  const [selectedPatient, setSelectedPatient] = useState<string | null>(null);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [modalContent, setModalContent] = useState('');

  // 自动检测异常数据并发送提醒
  useEffect(() => {
    const abnormalSigns = vitalSigns.filter(sign => sign.isAbnormal);
    if (abnormalSigns.length > 0) {
      const newAlert: AlertNotification = {
        id: (alertNotifications.length + 1).toString(),
        patientId: abnormalSigns[0].patientId,
        message: '检测到异常生命体征，请及时查看',
        timestamp: new Date().toLocaleString()
      };
      setAlertNotifications([...alertNotifications, newAlert]);
      Alert.alert('异常提醒', '检测到异常生命体征，请及时处理');
    }
  }, [vitalSigns]);

  const handleSelectPatient = (patientId: string) => {
    setSelectedPatient(patientId);
    Alert.alert('选择患者', '您已选择该患者进行查看');
  };

  const handleViewVitalSigns = (patientId: string) => {
    const signs = vitalSigns.filter(sign => sign.patientId === patientId);
    if (signs.length > 0) {
      const sign = signs[0];
      setModalContent(`日期: ${sign.date}\n血压: ${sign.bloodPressure}\n心率: ${sign.heartRate}\n体温: ${sign.temperature}\n状态: ${sign.isAbnormal ? '异常' : '正常'}`);
      setIsModalVisible(true);
    }
  };

  const handleViewMedicationRecord = (recordId: string) => {
    const record = medicationRecords.find(r => r.id === recordId);
    if (record) {
      setModalContent(`药品: ${record.medication}\n剂量: ${record.dosage}\n时间: ${record.time}\n日期: ${record.date}`);
      setIsModalVisible(true);
    }
  };

  const handleViewAlert = (alertId: string) => {
    const alert = alertNotifications.find(a => a.id === alertId);
    if (alert) {
      setModalContent(`提醒信息: ${alert.message}\n时间: ${alert.timestamp}`);
      setIsModalVisible(true);
    }
  };

  const handleClearAlert = (alertId: string) => {
    setAlertNotifications(alertNotifications.filter(a => a.id !== alertId));
    Alert.alert('提醒清除', '异常提醒已清除');
  };

  const openModal = (content: string) => {
    setModalContent(content);
    setIsModalVisible(true);
  };

  const closeModal = () => {
    setIsModalVisible(false);
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <Text style={styles.title}>家属患者监控</Text>
        <Text style={styles.subtitle}>家属通过App查看患者生命体征、用药记录，接收异常提醒</Text>
      </View>

      <ScrollView style={styles.content}>
        {/* 患者列表 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>患者列表</Text>
          {patients.map(patient => (
            <TouchableOpacity 
              key={patient.id}
              style={[
                styles.card,
                selectedPatient === patient.id && styles.selectedCard
              ]}
              onPress={() => handleSelectPatient(patient.id)}
            >
              <Text style={styles.icon}>👤</Text>
              <View style={styles.cardInfo}>
                <Text style={styles.cardTitle}>{patient.name}</Text>
                <Text style={styles.cardDescription}>年龄: {patient.age}</Text>
                <Text style={styles.cardDescription}>性别: {patient.gender}</Text>
                <Text style={styles.cardDescription}>病情: {patient.condition}</Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>

        {/* 生命体征 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>生命体征</Text>
          {vitalSigns.map(sign => (
            <TouchableOpacity 
              key={sign.id}
              style={[
                styles.signCard,
                sign.isAbnormal && styles.abnormalSignCard
              ]}
              onPress={() => handleViewVitalSigns(sign.patientId)}
            >
              <Text style={styles.icon}>❤️</Text>
              <View style={styles.cardInfo}>
                <Text style={styles.cardTitle}>{sign.date}</Text>
                <Text style={styles.cardDescription}>血压: {sign.bloodPressure}</Text>
                <Text style={styles.cardDescription}>心率: {sign.heartRate}</Text>
                <Text style={styles.cardDescription}>体温: {sign.temperature}</Text>
              </View>
              {sign.isAbnormal && (
                <Text style={styles.warningIcon}>⚠️</Text>
              )}
            </TouchableOpacity>
          ))}
        </View>

        {/* 用药记录 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>用药记录</Text>
          {medicationRecords.map(record => (
            <TouchableOpacity 
              key={record.id}
              style={styles.recordCard}
              onPress={() => handleViewMedicationRecord(record.id)}
            >
              <Text style={styles.icon}>💊</Text>
              <View style={styles.cardInfo}>
                <Text style={styles.cardTitle}>{record.medication}</Text>
                <Text style={styles.cardDescription}>剂量: {record.dosage}</Text>
                <Text style={styles.cardDescription}>时间: {record.time}</Text>
                <Text style={styles.cardDescription}>日期: {record.date}</Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>

        {/* 异常提醒 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>异常提醒</Text>
          {alertNotifications.map(alert => (
            <View key={alert.id} style={styles.alertCard}>
              <Text style={styles.icon}>🔔</Text>
              <View style={styles.cardInfo}>
                <Text style={styles.cardTitle}>{alert.message}</Text>
                <Text style={styles.cardDescription}>{alert.timestamp}</Text>
              </View>
              <TouchableOpacity 
                style={styles.clearButton}
                onPress={() => handleClearAlert(alert.id)}
              >
                <Text style={styles.clearText}>清除</Text>
              </TouchableOpacity>
            </View>
          ))}
        </View>

        {/* 使用说明 */}
        <View style={styles.infoCard}>
          <Text style={styles.sectionTitle}>📘 使用说明</Text>
          <Text style={styles.infoText}>• 选择患者查看详细信息</Text>
          <Text style={styles.infoText}>• 查看患者的生命体征数据</Text>
          <Text style={styles.infoText}>• 查看患者的用药记录</Text>
          <Text style={styles.infoText}>• 接收并处理异常提醒</Text>
        </View>

        {/* 弹框内容 */}
        <Modal
          animationType="slide"
          transparent={true}
          visible={isModalVisible}
          onRequestClose={closeModal}
        >
          <View style={styles.modalContainer}>
            <View style={styles.modalContent}>
              <Text style={styles.modalTitle}>详细信息</Text>
              <Text style={styles.modalText}>{modalContent}</Text>
              <TouchableOpacity
                style={styles.closeButton}
                onPress={closeModal}
              >
                <Text style={styles.closeButtonText}>关闭</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f9ff',
  },
  header: {
    flexDirection: 'column',
    padding: 16,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#bae6fd',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#0c4a6e',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: '#0284c7',
  },
  content: {
    flex: 1,
    marginTop: 12,
  },
  section: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#0c4a6e',
    marginBottom: 12,
  },
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f9ff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  selectedCard: {
    borderWidth: 2,
    borderColor: '#0284c7',
  },
  signCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f9ff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  abnormalSignCard: {
    borderLeftWidth: 4,
    borderLeftColor: '#ef4444',
  },
  recordCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f9ff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  alertCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fee2e2',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  icon: {
    fontSize: 28,
    marginRight: 12,
  },
  cardInfo: {
    flex: 1,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#0c4a6e',
    marginBottom: 4,
  },
  cardDescription: {
    fontSize: 14,
    color: '#0284c7',
    marginBottom: 2,
  },
  warningIcon: {
    fontSize: 20,
    color: '#ef4444',
  },
  clearButton: {
    backgroundColor: '#ef4444',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
  },
  clearText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: '500',
  },
  infoCard: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 80,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  infoText: {
    fontSize: 14,
    color: '#64748b',
    lineHeight: 20,
    marginBottom: 4,
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    width: '80%',
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 20,
    elevation: 5,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#0c4a6e',
    marginBottom: 12,
    textAlign: 'center',
  },
  modalText: {
    fontSize: 14,
    color: '#0c4a6e',
    lineHeight: 20,
    marginBottom: 20,
  },
  closeButton: {
    backgroundColor: '#0284c7',
    padding: 10,
    borderRadius: 8,
    alignItems: 'center',
  },
  closeButtonText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
  },
});

export default FamilyPatientMonitorApp;

---

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

打包之后再将打包后的鸿蒙OpenHarmony文件拷贝到鸿蒙的DevEco-Studio工程目录去：

最后运行效果图如下显示：

本文介绍了一款基于React Native开发的家属患者监控应用，该应用集成了患者信息管理、生命体征监测、用药记录和异常提醒等功能，为家属提供便捷的监控平台。应用采用React Hooks、TypeScript等技术，通过类型定义确保数据结构一致性，使用跨平台组件实现响应式布局。核心功能包括患者信息展示、生命体征异常检测、用药记录管理和自动提醒推送。文章重点分析了React Native与鸿蒙系统的适配方案，包括组件映射、性能优化和跨端复用逻辑。该应用展示了轻量级架构在多端一致性服务中的优势，为智慧医疗领域的居家照护场景提供了实用解决方案。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。