React Native 安卓、苹果、鸿蒙5.0 三端适配方案：条件编译 + 平台适配层_react-native ts 实现apk版本检测更新下载安装

下面我提供一个完整的 条件编译+平台适配层 实现方案，让同一套 React Native 代码能同时支持 Android、iOS 和鸿蒙 5.0 设备。

整体架构设计

#mermaid-svg-SliC0TtNCTOd9WBZ {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SliC0TtNCTOd9WBZ .error-icon{fill:#552222;}#mermaid-svg-SliC0TtNCTOd9WBZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SliC0TtNCTOd9WBZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SliC0TtNCTOd9WBZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SliC0TtNCTOd9WBZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SliC0TtNCTOd9WBZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SliC0TtNCTOd9WBZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SliC0TtNCTOd9WBZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SliC0TtNCTOd9WBZ .marker.cross{stroke:#333333;}#mermaid-svg-SliC0TtNCTOd9WBZ svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SliC0TtNCTOd9WBZ .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-SliC0TtNCTOd9WBZ .cluster-label text{fill:#333;}#mermaid-svg-SliC0TtNCTOd9WBZ .cluster-label span{color:#333;}#mermaid-svg-SliC0TtNCTOd9WBZ .label text,#mermaid-svg-SliC0TtNCTOd9WBZ span{fill:#333;color:#333;}#mermaid-svg-SliC0TtNCTOd9WBZ .node rect,#mermaid-svg-SliC0TtNCTOd9WBZ .node circle,#mermaid-svg-SliC0TtNCTOd9WBZ .node ellipse,#mermaid-svg-SliC0TtNCTOd9WBZ .node polygon,#mermaid-svg-SliC0TtNCTOd9WBZ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-SliC0TtNCTOd9WBZ .node .label{text-align:center;}#mermaid-svg-SliC0TtNCTOd9WBZ .node.clickable{cursor:pointer;}#mermaid-svg-SliC0TtNCTOd9WBZ .arrowheadPath{fill:#333333;}#mermaid-svg-SliC0TtNCTOd9WBZ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-SliC0TtNCTOd9WBZ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-SliC0TtNCTOd9WBZ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-SliC0TtNCTOd9WBZ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-SliC0TtNCTOd9WBZ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-SliC0TtNCTOd9WBZ .cluster text{fill:#333;}#mermaid-svg-SliC0TtNCTOd9WBZ .cluster span{color:#333;}#mermaid-svg-SliC0TtNCTOd9WBZ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-SliC0TtNCTOd9WBZ :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} Android iOS Harmony 业务代码 平台检测 当前平台 调用 Android 实现 调用 iOS 实现 调用鸿蒙实现 原生模块 ArkTS 适配层

项目结构

my-app/├── src/│ ├── common/  # 完全平台无关的代码│ ├── components/ # 普通React组件│ ├── modules/ # 业务模块│ ├── platforms/ # 平台适配层│ │ ├── android/ # Android专用实现│ │ ├── ios/ # iOS专用实现│ │ └── harmony/ # 鸿蒙专用实现│ ├── services/ # 核心服务│ └── App.tsx  # 应用入口├── android/  # RN Android工程├── ios/  # RN iOS工程├── harmony/  # 鸿蒙工程├── babel.config.js # Babel配置└── package.json

核心实现代码

1. 平台检测工具 (src/utils/platform.ts)

// 平台类型定义export type PlatformType = \'android\' | \'ios\' | \'harmony\';// 检测当前运行平台export const getPlatform = (): PlatformType => {  // React Native 环境 if (typeof navigator !== \'undefined\' && navigator.product === \'ReactNative\') {  return Platform.OS as \'android\' | \'ios\'; } // 鸿蒙环境 if (typeof globalThis.ohos !== \'u