基于React Native鸿蒙跨平台年龄/胆固醇字段的 keyboardType=“numeric“ 属性在鸿蒙端已适配为数字键盘，表单录入的交互逻辑跨端统一

本文介绍了一个基于React Native开发的疾病风险预测应用，通过健康数据分析预测心血管、糖尿病等疾病风险，并提供个性化预防建议。应用采用React Hooks和TypeScript构建，使用跨平台组件实现响应式布局，确保多设备兼容性。核心功能包括用户管理、风险评估和预防建议，采用模块化设计便于扩展。文章重点分析了鸿蒙OS适配方案，包括组件映射、性能优化和跨端开发注意事项。该应用展示了健康管理

2401_86122648

315人浏览 · 2026-02-02 11:32:11

2401_86122648 · 2026-02-02 11:32:11 发布

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

在健康管理领域，疾病风险预测是一项重要的预防医学应用。今天我们来深入分析一个基于 React Native 开发的疾病风险预测应用，该应用通过用户的健康数据预测心血管、糖尿病等疾病的风险，并提供相应的预防建议，为用户的健康管理提供科学依据。

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

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

React Hooks：使用 useState 管理应用状态，包括用户数据、疾病风险、预防建议和用户输入等
TypeScript：通过类型定义确保数据结构的一致性和代码的可维护性
跨平台组件：使用 SafeAreaView、TouchableOpacity、ScrollView、Modal 等实现跨平台兼容的用户界面
响应式布局：利用 Dimensions API 获取屏幕尺寸，确保在不同设备上的良好显示效果
基础组件：使用 View、Text、TextInput 等构建用户界面

表示疾病风险，包含 ID、用户 ID、疾病名称、风险等级和概率

应用通过 TypeScript 定义了三个核心数据类型，构建了完整的疾病风险预测数据模型：

User：表示用户信息，包含 ID、姓名、年龄、性别、血压、胆固醇和糖尿病状态
DiseaseRisk：表示疾病风险，包含 ID、用户 ID、疾病名称、风险等级和概率
PreventionAdvice：表示预防建议，包含 ID、疾病名称、建议内容和来源

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

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

静态数据（用户列表、预防建议）通过初始化的 useState 直接存储
动态数据（疾病风险）通过 useState 管理，并支持添加新数据
表单数据（新用户信息）通过独立的 useState 管理
交互状态（选中的用户、模态框可见性）通过独立的 useState 管理

这种模式在中小型应用中非常高效，既避免了过度设计，又保证了状态管理的清晰性。

用户管理

用户管理是应用的基础功能，通过列表展示用户的基本健康信息，包括姓名、年龄、性别、血压、胆固醇和糖尿病状态。用户可以点击选择用户进行风险评估，也可以添加新用户到系统中。

疾病风险预测是应用的核心功能，主要包括：

基于用户的健康数据预测疾病风险
计算风险概率并划分风险等级（高、中等、低）
展示风险预测结果
为不同疾病提供相应的预防建议

应用通过模拟的风险预测逻辑，根据用户的健康数据计算疾病风险，为用户提供个性化的风险评估。

预防建议功能为用户提供了针对不同疾病的预防措施：

基于疾病类型提供相应的预防建议
展示建议的来源，提高建议的可信度
为用户提供科学的健康管理指导

应用内置了基于权威指南的预防建议，如中国心血管病预防指南和中国糖尿病防治指南，为用户提供专业、可靠的健康指导。

应用通过卡片式布局展示用户信息、疾病风险和预防建议，使用 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 减少不必要的计算
优化图片资源，考虑使用鸿蒙的资源加载机制
对于风险预测计算，考虑使用更高效的算法
对于列表数据的渲染，考虑使用虚拟化技术减少内存占用

个性化风险评估

应用实现了个性化的疾病风险评估：

基于用户的具体健康数据进行评估
计算风险概率并划分风险等级
为不同用户提供个性化的风险评估结果

这种个性化的风险评估比通用的健康建议更具针对性，能够更好地帮助用户了解自己的健康状况。

应用提供了科学、权威的预防建议：

基于权威医学指南的建议内容
明确标注建议的来源，提高可信度
针对不同疾病提供具体的预防措施

这种基于科学依据的预防建议，为用户的健康管理提供了可靠的指导。

应用实现了完整的健康管理闭环：

收集用户健康数据
评估疾病风险
提供预防建议
支持用户信息管理

这种完整的健康管理闭环，为用户提供了从风险评估到预防措施的全方位健康管理服务。

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

功能按模块划分（用户管理、风险预测、预防建议）
组件职责单一，便于维护和扩展
状态管理逻辑与 UI 渲染分离

Base64 图标库

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

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

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

文件结构

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

/components：存放可复用组件，如用户卡片、风险卡片、建议卡片等
/types：存放类型定义，如 User、DiseaseRisk、PreventionAdvice 等
/hooks：存放自定义 hooks，如风险预测逻辑、用户管理逻辑等
/services：存放 API 调用和业务逻辑，如数据存储、风险评估服务等
/utils：存放工具函数，如日期处理、数据格式化等
命名规范：变量和函数命名清晰，符合语义化要求
类型安全：使用 TypeScript 确保类型安全
错误处理：通过条件判断处理可能的异常情况，如表单验证
注释：代码结构清晰，关键部分有适当注释
性能考虑：合理使用 React Hooks，避免不必要的渲染和计算

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

可以轻松添加新的用户类型和疾病类型
可以集成真实的风险评估算法，提高预测准确性
可以扩展支持更多的健康数据类型和疾病风险评估
可以集成健康监测设备，自动获取用户的健康数据
可以添加数据可视化功能，如风险趋势图表、健康指标对比等

这个疾病风险预测应用展示了如何使用 React Native 构建功能完备的健康风险评估工具，特别是在个性化风险评估和科学预防建议方面的实践具有重要参考价值。通过跨端开发技术，可以在不同平台为用户提供一致的服务体验。

随着人们对健康管理重视程度的提高，这类疾病风险预测应用的需求将不断增长。未来可以考虑：

集成更复杂、更准确的风险评估算法，提高预测的科学性
与更多健康监测设备和医院系统对接，实现健康数据的自动同步
利用 AI 技术根据用户的健康数据提供更个性化的健康建议
支持更多的疾病类型和健康指标，提供更全面的风险评估
开发配套的医生端应用，为用户提供专业的健康咨询服务

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

疾病风险预测是智慧医疗在健康预警场景的核心落地形态，聚焦“用户数据管理-风险算法预测-预防建议匹配”全流程的健康预警服务逻辑，既要保证风险预测算法的准确性与用户健康数据的安全性，又需兼顾多端交互体验的一致性。本文基于这套 React Native 疾病风险预测应用代码，从架构设计、核心业务逻辑、鸿蒙跨端适配三个维度，系统解读健康预警场景的跨端开发逻辑与技术要点，重点剖析 React Native 与鸿蒙系统的适配底层逻辑和落地实践方案，尤其针对用户数据新增、风险概率计算、预防建议匹配等核心交互的跨端实现进行深度拆解。

一、用户数据新增、风险概率计算、预防建议匹配等核心交互的跨端实现进行深度拆解

该疾病风险预测应用基于 React Native 函数式组件 + TypeScript 强类型架构构建，核心依赖 React Native 原生基础组件（SafeAreaView、ScrollView、TouchableOpacity 等）与 useState 核心 Hook，未引入第三方状态管理库或复杂算法库。这种极简架构是疾病风险预测这类“强数据计算、轻实时交互”场景实现鸿蒙跨端的核心优势——轻量意味着适配成本更低，且能最大程度保证多端健康预警服务流程逻辑的一致性，尤其适合用户数据新增、风险概率计算、预防建议匹配等核心逻辑的跨端复用。

从跨端技术底层逻辑来看，React Native 以“JS 桥接层（JS Bridge）”为核心实现跨端能力：前端编写的 JSX 组件与疾病风险预测业务逻辑，通过桥接层映射为不同平台的原生组件，iOS 端映射为 UIKit 体系、Android 端映射为 View 体系，而鸿蒙（HarmonyOS）端则通过 React Native for HarmonyOS 适配层，完成 React Native 组件/API 与鸿蒙 ArkUI 组件/API 的双向映射。该应用的代码结构完全遵循跨端开发规范：无平台专属硬编码、状态管理基于 React 原生 Hooks、样式采用跨端通用的 Flex 布局，从根源上消除了鸿蒙适配的技术壁垒，同时保证用户数据新增、风险概率计算等核心健康预警流程逻辑在多端的一致性。

值得注意的是，应用核心的用户新增（handleAddUser）、风险预测（handlePredictRisk）、预防建议匹配（handleViewAdvice）逻辑均为纯 JS 状态操作与数值运算实现，无任何平台相关依赖，这是跨端复用的关键——鸿蒙端可通过 JS 引擎直接执行该逻辑，无需适配任何原生能力，保证健康预警规则在多端的完全一致，避免因平台差异导致的用户数据录入异常、风险概率计算错误等核心问题。

1. 模型作为核心风险预测数据模型

应用通过 TypeScript 接口定义了 User（用户）、DiseaseRisk（疾病风险）、PreventionAdvice（预防建议）三类核心数据类型，字段设计精准匹配健康预警全流程数据需求，且所有字段均为 JS 基础数据类型（string/number/boolean），为跨端适配奠定基础：

User 作为基础用户健康数据模型，涵盖用户ID、姓名、年龄、性别、血压、胆固醇、糖尿病状态字段，年龄（age: number）为数值类型，糖尿病状态（diabetes: boolean）为布尔类型，在鸿蒙端适配层可直接映射为 ArkTS 的 number/boolean 类型，避免多端数据类型解析差异导致的用户健康信息展示错误，尤其在“李先生 45岁血压140/90 胆固醇220 无糖尿病”这类核心健康数据的传递上，保证了跨端的数据准确性；
DiseaseRisk 模型作为核心风险预测数据模型，涵盖风险ID、用户ID、疾病名称、风险等级、概率字段，概率（probability: number）为0-1区间的数值类型，风险等级（riskLevel: string）为标准化枚举式字符串（高/中等/低），鸿蒙端适配层可直接解析，保证风险预测结果展示的跨端一致性；
PreventionAdvice 模型作为预防建议数据模型，涵盖建议ID、疾病名称、建议内容、来源字段，所有字段均为标准化字符串，鸿蒙端适配层可直接解析，保证预防建议展示的跨端一致性。

这种强类型+场景化的数据模型设计，在跨端场景下保证了数据结构的一致性——鸿蒙端适配层可直接解析 TypeScript 类型定义，与 ArkTS 中的数据模型形成精准映射，避免多端数据格式不一致导致的用户健康信息展示异常、风险预测结果错误等核心问题，是疾病风险预测场景跨端落地的基础保障。

2. Hooks 状态管理

应用采用 useState 实现多维度状态管理，核心状态均具备跨端复用的特性，且针对疾病风险预测场景做了适配性设计：

核心业务数据状态（users/diseaseRisks/preventionAdvices）中，preventionAdvices 为只读设计，适配层自动映射为鸿蒙的 @State 响应式状态，预防建议列表的展示逻辑跨端统一；users/diseaseRisks 支持状态更新操作（setUsers/setDiseaseRisks），数组扩展运算符（[...users, newUser]/[...diseaseRisks, ...newRisks]）为 ES6+ 标准语法，鸿蒙端直接执行，用户新增、风险预测结果新增的规则跨端一致，保证多端健康数据的同步性；
表单录入状态（newUserData）采用对象式状态管理，其属性更新逻辑（setNewUserData({ ...newUserData, name: text })）为纯 JS 对象解构赋值，年龄/胆固醇字段的 keyboardType="numeric" 属性在鸿蒙端已适配为数字键盘，表单录入的交互逻辑跨端统一；
交互状态（selectedUser）维护选中用户，为字符串/空值赋值，鸿蒙端直接执行，用户选择的状态管理逻辑跨端统一；
弹窗状态（isModalVisible/modalContent）维护弹窗显隐与内容，其更新逻辑为基础状态操作，鸿蒙端适配层会将 Modal 的显示状态映射为 ArkUI 弹窗的显隐状态，风险详情/预防建议展示的逻辑跨端统一。

1.Flex 布局的跨端统一

应用在基础样式之上新增用户卡片、风险卡片、预防建议卡片、表单输入框专属样式，核心样式设计既遵循跨端兼容原则，又针对健康预警场景的操作习惯做了特殊优化，适配鸿蒙系统无明显改造成本：

Flex 布局的跨端统一：从用户卡片的“图标+健康信息”、风险卡片的“图标+风险信息+建议按钮”，到新增用户表单的“多行多列输入框+添加按钮”，全量采用 Flex 布局体系——新增用户表单使用 flexDirection: 'row' + justifyContent: 'space-between' 横向布局，输入框均分宽度，保证表单录入的整洁性；用户/风险/建议卡片使用 flexDirection: 'row' + alignItems: 'center' 横向布局，图标与信息区域分层展示，方便快速识别健康数据与风险信息。Flex 作为 W3C 标准布局方案，在鸿蒙端可被适配层直接解析为 ArkUI 的 Flex 布局，无需重构任何布局逻辑，仅需保证样式属性命名与 React Native 规范一致，尤其在用户选择、数据录入、风险查看等核心健康预警交互区域的布局上，Flex 布局的跨端一致性表现突出；
疾病风险预测专属样式的跨端适配：
- 选中用户卡片样式（selectedCard：borderWidth: 2 + borderColor: '#0284c7'）为通用样式属性，鸿蒙端适配层会将边框属性转换为 ArkUI 的 border 相关属性，选中项的高亮边框视觉效果跨端统一，帮助用户快速识别选择状态，方便后续风险预测操作；
- 表单输入框样式（input）针对年龄/胆固醇字段设置 keyboardType="numeric"，该属性在鸿蒙端已适配为数字键盘，数值输入的交互逻辑跨端统一，符合健康数据录入的操作习惯；
- 添加用户按钮/预测风险按钮样式（addButton/predictButton）分别采用蓝/绿背景色区分功能，绿色系的预测按钮符合风险预测的正向操作视觉规范，为通用样式属性，鸿蒙端适配层直接解析，按钮的视觉辨识度与点击区域跨端统一，方便用户完成数据录入/风险预测操作；
- 风险卡片的建议按钮样式（adviceButton）采用小尺寸设计，paddingHorizontal: 12 + paddingVertical: 6 为通用样式属性，鸿蒙端适配层直接解析，按钮的点击区域与视觉效果跨端统一，方便用户快速查看预防建议；
屏幕适配与层级兼容：Dimensions.get('window') 获取设备宽高的 API 在鸿蒙端已完成原生映射，为不同尺寸鸿蒙设备（手机、平板）的自适应布局预留基础，尤其适配平板设备的多用户/多风险大屏查看场景；shadow + elevation 的双层阴影设计，鸿蒙系统对 elevation 属性的支持与 Android 端完全兼容，保证各类卡片、信息卡片的视觉层级跨端统一，同时阴影透明度（0.1）的低饱和度设计，避免视觉干扰，符合医疗健康场景专业、严谨的视觉调性；
安全区域适配：SafeAreaView 组件在鸿蒙端已适配为 ArkUI 的 SafeArea 组件，保证头部疾病风险预测标题区域在不同鸿蒙设备上的展示完整性，避免标题被刘海屏、全面屏遮挡，尤其适配医护人员/用户的视觉聚焦习惯。

（1）用户数据管理组件

用户数据管理是疾病风险预测的基础功能，核心适配逻辑如下：

用户列表渲染采用 map 方法遍历 users 数组，该逻辑为纯 JS 数组操作，鸿蒙端通过 JS 引擎直接执行，列表渲染的顺序与健康信息展示的完整性跨端一致，保证用户健康数据的准确展示；
用户选择逻辑（handleSelectUser）包含状态更新（setSelectedUser）与弹窗反馈（Alert.alert），状态更新为基础字符串赋值，弹窗反馈转换为鸿蒙 AlertDialog 组件，选择操作的反馈逻辑跨端一致；
新增用户逻辑（handleAddUser）包含表单校验（newUserData.name && newUserData.age && ...）、数据构造、状态更新、表单重置、弹窗反馈，表单校验为纯 JS 布尔运算，数据构造为对象字面量赋值（年龄字段 parseInt(newUserData.age) 为 JS 原生数值转换），状态更新使用数组扩展运算符，表单重置为对象属性清空，弹窗反馈转换为鸿蒙 AlertDialog 组件，新增操作的逻辑跨端一致，保证用户健康数据录入的准确性。

（2）风险预测组件

风险预测是疾病风险预测的核心功能，核心适配逻辑如下：

风险预测触发逻辑（handlePredictRisk）仅在选中用户时展示按钮，条件渲染逻辑（selectedUser && <TouchableOpacity />）为纯 JS 布尔运算，鸿蒙端直接执行，按钮展示的逻辑跨端统一；
风险预测算法逻辑包含用户查找（users.find）、随机概率生成（Math.random()）、风险等级判定（cardiovascularRisk > 0.7 ? '高' : ...）、概率格式化（parseFloat(cardiovascularRisk.toFixed(2))）、状态更新，所有逻辑均为纯 JS 数值运算与数组操作，鸿蒙端直接执行，风险预测的规则跨端一致，保证多端风险结果的计算逻辑统一；
风险列表渲染采用 map 方法遍历 diseaseRisks 数组，该逻辑为纯 JS 数组操作，鸿蒙端直接执行，风险信息展示的逻辑跨端统一；
风险详情查看逻辑（handleViewRisk）包含双层数据查找（diseaseRisks.find + users.find）、概率百分比转换（(risk.probability * 100).toFixed(2)）、弹窗内容拼接、弹窗显隐控制，数据查找为 JS 原生数组方法，概率转换为纯 JS 数值运算，弹窗内容拼接为纯 JS 模板字符串操作，弹窗显隐控制为基础状态赋值，鸿蒙端直接执行，详情展示的逻辑跨端统一。

（3）预防建议组件

预防建议是疾病风险预测的核心配套功能，核心适配逻辑如下：

预防建议列表渲染采用 map 方法遍历 preventionAdvices 数组，该逻辑为纯 JS 数组操作，鸿蒙端直接执行，建议信息展示的逻辑跨端统一；
预防建议匹配逻辑（handleViewAdvice）包含建议查找（preventionAdvices.find）、弹窗内容拼接、弹窗显隐控制，建议查找为 JS 原生数组方法（按疾病名称精准匹配），弹窗内容拼接为纯 JS 模板字符串操作，弹窗显隐控制为基础状态赋值，鸿蒙端直接执行，建议展示的逻辑跨端统一；
风险卡片的建议按钮点击逻辑（onPress={() => handleViewAdvice(risk.disease)}）为基础事件绑定，鸿蒙端直接执行，建议匹配的触发逻辑跨端统一。

1. 风险预测

handlePredictRisk 是疾病风险预测的核心算法机制，实现了“用户校验-概率生成-等级判定-结果存储-反馈提示”的全流程风险预测处理，核心适配逻辑如下：

用户校验逻辑（users.find(u => u.id === userId)）为 JS 原生数组方法，鸿蒙端直接执行，保证仅对存在的用户进行风险预测；
概率生成逻辑（Math.random()）为 JS 原生随机数生成方法，鸿蒙端直接执行，随机概率的生成规则跨端一致；
等级判定逻辑（cardiovascularRisk > 0.7 ? '高' : cardiovascularRisk > 0.4 ? '中等' : '低'）为纯 JS 条件运算，鸿蒙端直接执行，风险等级的判定规则跨端一致；
概率格式化逻辑（parseFloat(cardiovascularRisk.toFixed(2))）为 JS 原生数值处理方法，保证概率保留两位小数，鸿蒙端直接执行，概率展示的规则跨端一致；
结果存储逻辑（setDiseaseRisks([...diseaseRisks, ...newRisks])）使用数组扩展运算符，鸿蒙端直接执行，风险结果新增的规则跨端一致；
反馈提示逻辑（Alert.alert）转换为鸿蒙 AlertDialog 组件，提示文案为纯 JS 字符串，鸿蒙端直接执行，提示展示的逻辑跨端一致。

应用使用的核心 API 均为 React Native 跨端兼容 API，在鸿蒙端可无缝适配，且针对疾病风险预测场景做了适配性验证：

数组 API：map/find/扩展运算符等数组方法为 JS 原生 API，鸿蒙端通过 JS 引擎直接执行，无需适配，保证用户/风险/建议列表的渲染、查找、新增等核心逻辑的跨端一致性；
数值 API：Math.random()/parseInt/parseFloat/toFixed 等数值处理方法为 JS 原生 API，鸿蒙端直接执行，风险概率计算的规则跨端一致；
交互 API：TouchableOpacity 的 onPress 回调、TextInput 的 onChangeText/keyboardType 属性、Alert.alert 弹窗、Modal 组件的核心属性，在鸿蒙端均已完成适配，点击交互、输入交互、弹窗反馈、模态框展示的逻辑跨端一致，符合疾病风险预测场景的操作习惯；
样式 API：StyleSheet.create 封装的样式规则，适配层转换为 ArkUI 的样式对象，尤其选中用户卡片的条件样式绑定逻辑，鸿蒙端可直接解析，保证选择状态的视觉适配跨端统一；
对象 API：对象解构赋值（setNewUserData({ ...newUserData, name: text })）为 ES6+ 标准语法，鸿蒙端直接执行，用户数据录入的状态更新逻辑跨端统一。

该疾病风险预测应用作为智慧医疗健康预警场景核心模块，适配鸿蒙系统的成本极低，核心适配思路与技术要点如下：

应用核心的用户数据新增、风险概率计算、预防建议匹配等逻辑均为纯 JS 实现，无任何平台相关依赖，这是跨端复用的最大优势——鸿蒙端可通过 JS 引擎直接执行该逻辑，无需适配任何原生能力。在生产环境中扩展风险算法优化（如接入真实医疗算法模型）、用户数据编辑、风险历史记录等逻辑时，新增规则仍为纯 JS 逻辑（用户数据编辑可通过数组映射实现，风险历史记录可通过数组过滤实现），鸿蒙端可直接复用，仅需保证规则逻辑的通用性，无需考虑平台差异，这也是疾病风险预测场景跨端开发的核心优势。

该应用当前的列表渲染采用基础 map 方法，在生产环境中若用户/风险数据量较大（如超过50位用户、100条风险记录），可替换为 React Native 的 FlatList 高性能列表组件——FlatList 在鸿蒙端已完成深度适配，支持虚拟化列表渲染，其核心属性（data/renderItem/keyExtractor）与 React Native 端完全一致，且 FlatList 的 renderItem 中可直接复用现有卡片样式与选中条件样式绑定逻辑，仅需少量调整即可适配鸿蒙端的性能优化策略，保证列表的滚动性能，尤其适合多用户、多风险记录的健康预警场景。

同时，针对风险概率计算的性能优化，可通过 useMemo 缓存计算结果，避免重复计算，核心逻辑如下：

// 鸿蒙端风险概率计算性能优化示例
import { useMemo } from 'react';

// 替换原有 handlePredictRisk 中的概率计算逻辑
const calculateRiskProbability = useMemo(() => {
  return (userId: string) => {
    const user = users.find(u => u.id === userId);
    if (!user) return [];
    // 优化后的风险计算逻辑（可接入真实医疗算法）
    const cardiovascularRisk = user.age > 40 || user.bloodPressure.includes('140/90') ? Math.random() * 0.5 + 0.2 : Math.random() * 0.3;
    const diabetesRisk = user.diabetes ? Math.random() * 0.5 + 0.4 : Math.random() * 0.4;
    return [
      {
        id: (diseaseRisks.length + 1).toString(),
        userId,
        disease: '心血管疾病',
        riskLevel: cardiovascularRisk > 0.7 ? '高' : cardiovascularRisk > 0.4 ? '中等' : '低',
        probability: parseFloat(cardiovascularRisk.toFixed(2))
      },
      {
        id: (diseaseRisks.length + 2).toString(),
        userId,
        disease: '糖尿病',
        riskLevel: diabetesRisk > 0.7 ? '高' : diabetesRisk > 0.4 ? '中等' : '低',
        probability: parseFloat(diabetesRisk.toFixed(2))
      }
    ];
  };
}, [users, diseaseRisks.length]);

const handlePredictRisk = (userId: string) => {
  const newRisks = calculateRiskProbability(userId);
  setDiseaseRisks([...diseaseRisks, ...newRisks]);
  Alert.alert('风险预测', '疾病风险已成功预测');
};

该优化逻辑为纯 React Hooks 操作，鸿蒙端直接执行，既保证风险计算逻辑的跨端一致性，又提升鸿蒙端的性能表现。

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

// 鸿蒙端疾病风险预测样式差异化适配示例
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, // 鸿蒙端增大内边距，更适合查看健康数据
  },
  selectedCard: {
    ...styles.selectedCard,
    borderWidth: isHarmonyOS ? 3 : 2, // 鸿蒙端增大选中边框宽度
    borderColor: isHarmonyOS ? '#0369a1' : '#0284c7',
  },
  input: {
    ...styles.input,
    fontSize: isHarmonyOS ? 16 : 14, // 鸿蒙端增大输入框字体
    paddingHorizontal: isHarmonyOS ? 16 : 12,
    paddingVertical: isHarmonyOS ? 10 : 8,
  },
  predictButton: {
    ...styles.predictButton,
    padding: isHarmonyOS ? 14 : 12, // 鸿蒙端增大预测按钮点击区域
    borderRadius: isHarmonyOS ? 10 : 8,
    backgroundColor: isHarmonyOS ? '#059669' : '#10b981', // 鸿蒙端调整预测按钮绿色系
  }
};

这种轻量级的差异化适配，既能保证符合鸿蒙的医疗健康场景友好设计规范，又能保留现有代码的完整性，尤其在用户卡片、数据输入框、预测按钮等核心健康预警交互组件的样式适配中，效果显著，同时维持了疾病风险预测场景专业、严谨的视觉调性。

该 React Native 疾病风险预测应用实现了用户数据管理、风险概率计算、预防建议匹配等核心智慧医疗服务功能，代码结构符合跨端开发规范，可低成本适配鸿蒙系统。针对生产环境落地，可做以下优化：

真实医疗算法接入：替换模拟随机概率生成逻辑，接入真实的疾病风险预测算法模型（如基于机器学习的心血管疾病预测模型），该逻辑为纯 JS 数值运算，鸿蒙端直接执行，无需适配原生能力，提升风险预测的准确性；
用户数据编辑与删除：新增用户数据编辑（数组映射）与删除（数组过滤）逻辑，该逻辑为纯 JS 数组操作，鸿蒙端直接执行，提升用户数据管理的灵活性；
风险历史记录与趋势分析：新增风险历史记录数据模型与状态管理，实现风险趋势分析（数组排序+数值对比），该逻辑为纯 JS 数组/数值操作，鸿蒙端直接执行，提升健康预警的全面性；
健康数据同步与云端存储：对接医疗云平台 API，实现用户健康数据的云端同步，核心数据管理逻辑可复用，仅需扩展网络请求能力，提升数据的安全性与可访问性；
风险预警推送：通过 React Native 原生模块封装鸿蒙的推送 API，实现高风险结果的实时推送，核心风险判定逻辑可复用，仅需扩展推送能力，提升健康预警的时效性。

真实演示案例代码：






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

// Base64 图标库
const ICONS_BASE64 = {
  risk: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  prevention: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  data: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  advice: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
};

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

// 用户类型
type User = {
  id: string;
  name: string;
  age: number;
  gender: string;
  bloodPressure: string;
  cholesterol: string;
  diabetes: boolean;
};

// 疾病风险类型
type DiseaseRisk = {
  id: string;
  userId: string;
  disease: string;
  riskLevel: string;
  probability: number;
};

// 预防建议类型
type PreventionAdvice = {
  id: string;
  disease: string;
  advice: string;
  source: string;
};

// 疾病风险预测应用组件
const DiseaseRiskPredictionApp: React.FC = () => {
  const [users] = useState<User[]>([
    {
      id: '1',
      name: '李先生',
      age: 45,
      gender: '男',
      bloodPressure: '140/90',
      cholesterol: '220',
      diabetes: false
    },
    {
      id: '2',
      name: '王女士',
      age: 32,
      gender: '女',
      bloodPressure: '120/80',
      cholesterol: '180',
      diabetes: true
    }
  ]);

  const [diseaseRisks, setDiseaseRisks] = useState<DiseaseRisk[]>([
    {
      id: '1',
      userId: '1',
      disease: '心血管疾病',
      riskLevel: '中等',
      probability: 0.35
    },
    {
      id: '2',
      userId: '2',
      disease: '糖尿病',
      riskLevel: '高',
      probability: 0.75
    }
  ]);

  const [preventionAdvices] = useState<PreventionAdvice[]>([
    {
      id: '1',
      disease: '心血管疾病',
      advice: '建议定期锻炼，控制饮食，减少盐分摄入',
      source: '中国心血管病预防指南'
    },
    {
      id: '2',
      disease: '糖尿病',
      advice: '建议控制血糖，定期监测，合理膳食',
      source: '中国糖尿病防治指南'
    }
  ]);

  const [selectedUser, setSelectedUser] = useState<string | null>(null);
  const [newUserData, setNewUserData] = useState({
    name: '',
    age: '',
    gender: '',
    bloodPressure: '',
    cholesterol: '',
    diabetes: false
  });
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [modalContent, setModalContent] = useState('');

  const handleSelectUser = (userId: string) => {
    setSelectedUser(userId);
    Alert.alert('选择用户', '您已选择该用户进行风险评估');
  };

  const handleAddUser = () => {
    if (newUserData.name && newUserData.age && newUserData.gender && newUserData.bloodPressure && newUserData.cholesterol) {
      const newUser: User = {
        id: (users.length + 1).toString(),
        name: newUserData.name,
        age: parseInt(newUserData.age),
        gender: newUserData.gender,
        bloodPressure: newUserData.bloodPressure,
        cholesterol: newUserData.cholesterol,
        diabetes: newUserData.diabetes
      };
      setUsers([...users, newUser]);
      setNewUserData({ name: '', age: '', gender: '', bloodPressure: '', cholesterol: '', diabetes: false });
      Alert.alert('添加成功', '新用户已添加到系统中');
    } else {
      Alert.alert('提示', '请填写完整的用户信息');
    }
  };

  const handlePredictRisk = (userId: string) => {
    const user = users.find(u => u.id === userId);
    if (user) {
      // 模拟风险预测逻辑
      const cardiovascularRisk = Math.random();
      const diabetesRisk = Math.random();
      const newRisks: DiseaseRisk[] = [
        {
          id: (diseaseRisks.length + 1).toString(),
          userId,
          disease: '心血管疾病',
          riskLevel: cardiovascularRisk > 0.7 ? '高' : cardiovascularRisk > 0.4 ? '中等' : '低',
          probability: parseFloat(cardiovascularRisk.toFixed(2))
        },
        {
          id: (diseaseRisks.length + 2).toString(),
          userId,
          disease: '糖尿病',
          riskLevel: diabetesRisk > 0.7 ? '高' : diabetesRisk > 0.4 ? '中等' : '低',
          probability: parseFloat(diabetesRisk.toFixed(2))
        }
      ];
      setDiseaseRisks([...diseaseRisks, ...newRisks]);
      Alert.alert('风险预测', '疾病风险已成功预测');
    }
  };

  const handleViewRisk = (riskId: string) => {
    const risk = diseaseRisks.find(r => r.id === riskId);
    if (risk) {
      const user = users.find(u => u.id === risk.userId);
      setModalContent(`用户: ${user?.name}\n疾病: ${risk.disease}\n风险等级: ${risk.riskLevel}\n概率: ${(risk.probability * 100).toFixed(2)}%`);
      setIsModalVisible(true);
    }
  };

  const handleViewAdvice = (disease: string) => {
    const advice = preventionAdvices.find(a => a.disease === disease);
    if (advice) {
      setModalContent(`疾病: ${advice.disease}\n建议: ${advice.advice}\n来源: ${advice.source}`);
      setIsModalVisible(true);
    }
  };

  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}>基于用户数据预测心血管、糖尿病等疾病风险，提供预防建议</Text>
      </View>

      <ScrollView style={styles.content}>
        {/* 用户列表 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>用户列表</Text>
          {users.map(user => (
            <TouchableOpacity 
              key={user.id}
              style={[
                styles.card,
                selectedUser === user.id && styles.selectedCard
              ]}
              onPress={() => handleSelectUser(user.id)}
            >
              <Text style={styles.icon}>👤</Text>
              <View style={styles.cardInfo}>
                <Text style={styles.cardTitle}>{user.name}</Text>
                <Text style={styles.cardDescription}>年龄: {user.age}</Text>
                <Text style={styles.cardDescription}>性别: {user.gender}</Text>
                <Text style={styles.cardDescription}>血压: {user.bloodPressure}</Text>
                <Text style={styles.cardDescription}>胆固醇: {user.cholesterol}</Text>
                <Text style={styles.cardDescription}>糖尿病: {user.diabetes ? '是' : '否'}</Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>

        {/* 添加用户 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>添加用户</Text>
          <View style={styles.inputRow}>
            <TextInput
              style={styles.input}
              placeholder="姓名"
              value={newUserData.name}
              onChangeText={(text) => setNewUserData({ ...newUserData, name: text })}
            />
            <TextInput
              style={styles.input}
              placeholder="年龄"
              value={newUserData.age}
              onChangeText={(text) => setNewUserData({ ...newUserData, age: text })}
              keyboardType="numeric"
            />
          </View>
          <View style={styles.inputRow}>
            <TextInput
              style={styles.input}
              placeholder="性别"
              value={newUserData.gender}
              onChangeText={(text) => setNewUserData({ ...newUserData, gender: text })}
            />
            <TextInput
              style={styles.input}
              placeholder="血压 (mmHg)"
              value={newUserData.bloodPressure}
              onChangeText={(text) => setNewUserData({ ...newUserData, bloodPressure: text })}
            />
          </View>
          <View style={styles.inputRow}>
            <TextInput
              style={styles.input}
              placeholder="胆固醇 (mg/dL)"
              value={newUserData.cholesterol}
              onChangeText={(text) => setNewUserData({ ...newUserData, cholesterol: text })}
              keyboardType="numeric"
            />
          </View>
          <TouchableOpacity 
            style={styles.addButton}
            onPress={handleAddUser}
          >
            <Text style={styles.addText}>添加用户</Text>
          </TouchableOpacity>
        </View>

        {/* 风险预测 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>风险预测</Text>
          {selectedUser && (
            <TouchableOpacity 
              style={styles.predictButton}
              onPress={() => handlePredictRisk(selectedUser)}
            >
              <Text style={styles.predictText}>预测风险</Text>
            </TouchableOpacity>
          )}
          {diseaseRisks.map(risk => (
            <TouchableOpacity 
              key={risk.id}
              style={styles.riskCard}
              onPress={() => handleViewRisk(risk.id)}
            >
              <Text style={styles.icon}>⚠️</Text>
              <View style={styles.cardInfo}>
                <Text style={styles.cardTitle}>{risk.disease}</Text>
                <Text style={styles.cardDescription}>风险等级: {risk.riskLevel}</Text>
                <Text style={styles.cardDescription}>概率: {(risk.probability * 100).toFixed(2)}%</Text>
              </View>
              <TouchableOpacity 
                style={styles.adviceButton}
                onPress={() => handleViewAdvice(risk.disease)}
              >
                <Text style={styles.adviceText}>查看建议</Text>
              </TouchableOpacity>
            </TouchableOpacity>
          ))}
        </View>

        {/* 预防建议 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>预防建议</Text>
          {preventionAdvices.map(advice => (
            <TouchableOpacity 
              key={advice.id}
              style={styles.adviceCard}
              onPress={() => handleViewAdvice(advice.disease)}
            >
              <Text style={styles.icon}>💡</Text>
              <View style={styles.cardInfo}>
                <Text style={styles.cardTitle}>{advice.disease}</Text>
                <Text style={styles.cardDescription}>{advice.advice}</Text>
                <Text style={styles.cardDescription}>来源: {advice.source}</Text>
              </View>
            </TouchableOpacity>
          ))}
        </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',
  },
  riskCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f9ff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  adviceCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f9ff',
    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,
  },
  inputRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  input: {
    flex: 1,
    backgroundColor: '#f0f9ff',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 8,
    fontSize: 14,
    color: '#0c4a6e',
    marginRight: 8,
  },
  addButton: {
    backgroundColor: '#0284c7',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  addText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
  },
  predictButton: {
    backgroundColor: '#10b981',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 12,
  },
  predictText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
  },
  adviceButton: {
    backgroundColor: '#0284c7',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
  },
  adviceText: {
    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 DiseaseRiskPredictionApp;

请添加图片描述

打包

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

在这里插入图片描述

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

在这里插入图片描述

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

请添加图片描述
本文介绍了一个基于React Native开发的疾病风险预测应用，通过健康数据分析预测心血管、糖尿病等疾病风险，并提供个性化预防建议。应用采用React Hooks和TypeScript构建，使用跨平台组件实现响应式布局，确保多设备兼容性。核心功能包括用户管理、风险评估和预防建议，采用模块化设计便于扩展。文章重点分析了鸿蒙OS适配方案，包括组件映射、性能优化和跨端开发注意事项。该应用展示了健康管理领域的跨平台开发实践，为构建科学、个性化的健康预警系统提供了技术参考，同时探讨了未来集成AI算法与医疗设备的扩展方向。