📋 项目概述

DailyHotBundle 是一个基于 React Native 开发的跨平台移动应用项目，其最大的特色在于支持 HarmonyOS（鸿蒙系统），实现了 Android、iOS 和 HarmonyOS 三端统一开发。项目采用 TypeScript 作为主要开发语言，使用 React Native 0.72.5 版本构建。

项目基本信息

• 项目名称: DailyHotBundle
• 版本: 0.0.1
• 开发语言: TypeScript
• 框架版本: React Native 0.72.5
• React 版本: 18.2.0
• Node.js 要求: >= 16

---

🏗️ 技术架构

核心技术栈

1. React Native 0.72.5

   • 跨平台移动应用开发框架
   • 支持 Android 和 iOS 原生平台

2. HarmonyOS 支持

   • 使用 @react-native-oh/react-native-harmony (v0.72.90)
   • 通过 Metro 配置集成 HarmonyOS 打包支持
   • 实现了 React Native 代码在鸿蒙系统上的运行

3. TypeScript 4.8.4

   • 提供类型安全的开发体验
   • 使用 @tsconfig/react-native 标准配置

4. Metro Bundler

   • JavaScript 打包工具
   • 支持 HarmonyOS 特殊配置

项目结构分析

DailyHotBundle/
├── android/              # Android 平台原生代码
│   ├── app/
│   │   ├── src/
│   │   │   ├── main/     # 主应用代码
│   │   │   ├── debug/    # 调试配置
│   │   │   └── release/  # 发布配置
│   │   └── build.gradle  # Gradle 构建配置
│   └── gradle/           # Gradle 包装器
│
├── ios/                  # iOS 平台原生代码
│   ├── DailyHotBundle/   # iOS 应用主目录
│   │   ├── AppDelegate.mm  # iOS 应用入口
│   │   └── Info.plist   # iOS 配置文件
│   └── Podfile          # CocoaPods 依赖管理
│
├── harmony/              # HarmonyOS 平台支持 ⭐
│   └── entry/
│       └── src/main/resources/rawfile/
│           ├── assets/   # 资源文件
│           └── bundle.harmony.js  # HarmonyOS 打包文件
│
├── __tests__/            # 测试文件
├── App.tsx              # 应用主组件
├── index.js             # 应用入口文件
├── package.json         # 项目依赖配置
├── tsconfig.json        # TypeScript 配置
├── metro.config.js      # Metro 打包配置
└── babel.config.js      # Babel 转译配置

---

🔧 核心配置文件解析

1. package.json - 项目依赖管理

{
  "dependencies": {
    "@react-native-oh/react-native-harmony": "^0.72.90",  // HarmonyOS 支持
    "react": "18.2.0",
    "react-native": "0.72.5"
  }
}

关键依赖说明:

• @react-native-oh/react-native-harmony: 这是项目的核心特色，提供了 React Native 在 HarmonyOS 上的运行能力
• React 18.2.0: 使用最新的 React 特性
• React Native 0.72.5: 稳定版本，支持新架构

脚本命令:

• npm run android: 运行 Android 应用
• npm run ios: 运行 iOS 应用
• npm run harmony: HarmonyOS 打包命令 ⭐
• npm start: 启动 Metro 开发服务器

2. metro.config.js - Metro 打包配置

const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');

module.exports = mergeConfig(
  getDefaultConfig(__dirname), 
  createHarmonyMetroConfig({
    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
  }, config)
);

配置要点:

• 集成了 HarmonyOS 专用的 Metro 配置
• 通过 createHarmonyMetroConfig 函数创建 HarmonyOS 打包配置
• 支持多平台打包（Android、iOS、HarmonyOS）

3. tsconfig.json - TypeScript 配置

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

使用 React Native 官方推荐的 TypeScript 配置，确保类型检查符合 React Native 最佳实践。

4. babel.config.js - Babel 转译配置

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

使用 Metro 的 Babel 预设，支持 React Native 的 JSX 和 ES6+ 语法转译。

---

📱 平台支持详解

Android 平台

入口文件: android/app/src/main/java/com/dailyhotbundle/MainApplication.java

关键特性:

• 使用 DefaultReactNativeHost 作为 React Native 宿主
• 支持新架构（New Architecture）
• 支持 Hermes JavaScript 引擎
• 集成 Flipper 调试工具

构建系统: Gradle

• 使用 Android Gradle Plugin
• 支持自动链接 React Native 包

iOS 平台

入口文件: ios/DailyHotBundle/AppDelegate.mm

关键特性:

• Objective-C++ 实现（.mm 文件）
• 使用 RCTBundleURLProvider 管理 JS Bundle 加载
• 开发模式从 Metro 服务器加载，生产模式使用本地 Bundle

依赖管理: CocoaPods

• 通过 Podfile 管理 iOS 依赖

HarmonyOS 平台 ⭐

特殊配置:

• 在 harmony/entry/src/main/resources/rawfile/ 目录下存放打包后的资源
• 通过 npm run harmony 命令生成 bundle.harmony.js
• 使用 @react-native-oh/react-native-harmony 提供的打包工具

集成方式:

• Metro 配置中集成了 HarmonyOS 支持
• 打包后的 JS Bundle 会被放置在 HarmonyOS 项目的资源目录中

---

💻 应用代码结构

入口文件 (index.js)

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

功能说明:

• 使用 AppRegistry 注册应用主组件
• 从 app.json 读取应用名称
• 将 App 组件注册为根组件

主应用组件 (App.tsx)

组件特性:

• 使用 TypeScript 编写，提供类型安全
• 支持深色/浅色主题切换（通过 useColorScheme Hook）
• 使用 SafeAreaView 确保内容在安全区域内显示
• 包含多个示例 Section 组件

代码结构:

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  // 主题相关样式配置
  // 渲染应用界面
}

UI 组件:

• SafeAreaView: 安全区域视图
• ScrollView: 可滚动视图
• StatusBar: 状态栏配置
• Section: 自定义内容区块组件

---

🚀 开发工作流

1. 启动开发服务器

npm start
# 或
yarn start

启动 Metro Bundler，提供热重载和快速刷新功能。

2. 运行应用

Android:

npm run android

iOS:

npm run ios

HarmonyOS:

npm run harmony

3. 开发调试

• Android: 按 R 键两次或使用开发者菜单（Ctrl+M / Cmd+M）
• iOS: 按 Cmd+R 重新加载应用
• 支持 Flipper 调试工具（Android）

---

🧪 测试配置

项目配置了 Jest 测试框架：

{
  "devDependencies": {
    "jest": "^29.2.1",
    "react-test-renderer": "18.2.0",
    "@types/react-test-renderer": "^18.0.0"
  }
}

测试文件位置: __tests__/App.test.tsx

运行测试：

npm test

---

🔍 项目特色与亮点

1. 三端统一开发 ⭐

这是项目最大的亮点：一套代码，三端运行

• Android: 原生支持
• iOS: 原生支持
• HarmonyOS: 通过 @react-native-oh/react-native-harmony 实现

2. TypeScript 支持

• 完整的类型定义
• 更好的 IDE 支持
• 编译时错误检查

3. 现代化开发体验

• React 18.2.0 新特性
• Hooks API
• 函数式组件

4. 灵活的构建配置

• Metro 多平台配置
• Babel 转译优化
• 支持新架构（New Architecture）

---

📦 依赖管理

生产依赖

包名	版本	用途
react	18.2.0	React 核心库
react-native	0.72.5	React Native 框架
@react-native-oh/react-native-harmony	^0.72.90	HarmonyOS 支持

开发依赖

• 构建工具: Babel, Metro, TypeScript
• 代码质量: ESLint, Prettier
• 测试框架: Jest, react-test-renderer
• 类型定义: @types/react, @types/react-test-renderer

🎯 适用场景

1. 跨平台移动应用开发

   • 需要同时支持 Android、iOS 和 HarmonyOS
   • 希望用一套代码覆盖多个平台

2. HarmonyOS 应用开发

   • 想要使用 React Native 开发鸿蒙应用
   • 需要利用现有的 React Native 生态

3. 快速原型开发

   • 使用 React Native 快速构建 MVP
   • 需要快速迭代和热重载

---

🔮 技术发展趋势

React Native 新架构

项目已支持新架构（New Architecture），包括：

• Fabric: 新的渲染系统
• TurboModules: 新的原生模块系统
• Codegen: 自动生成类型定义

HarmonyOS 生态

随着 HarmonyOS 的不断发展，@react-native-oh/react-native-harmony 也在持续更新，为开发者提供更好的开发体验。

---

📝 开发建议

1. 代码组织

• 使用 TypeScript 严格模式
• 遵循 React Native 最佳实践
• 合理拆分组件，保持代码可维护性

2. 性能优化

• 使用 React.memo 优化组件渲染
• 合理使用 useMemo 和 useCallback
• 注意图片和资源的优化

3. 平台适配

• 使用 Platform.select() 处理平台差异
• 注意不同平台的 UI/UX 差异
• 测试所有目标平台

4. HarmonyOS 开发注意事项

• 确保使用正确的打包命令
• 注意 HarmonyOS 特有的 API 限制
• 定期更新 @react-native-oh/react-native-harmony 版本

---

🧩 业务存储 bundles 目录实战

目标与功能

• 新增 bundles/ 目录，用于存放业务功能模块
• 实现以下五个功能：
  • 每天60秒读懂世界
  • 必应每日壁纸
  • 当日货币汇率
  • 历史上的今天
  • Epic Games 免费游戏

新增目录结构

bundles/
├── index.ts
├── world60s/
│   ├── api.ts
│   ├── hooks.ts
│   ├── index.ts
│   └── screen.tsx
├── bingWallpaper/
│   ├── api.ts
│   ├── hooks.ts
│   ├── index.ts
│   └── screen.tsx
├── currencyRates/
│   ├── api.ts
│   ├── hooks.ts
│   ├── index.ts
│   └── screen.tsx
├── historyToday/
│   ├── api.ts
│   ├── hooks.ts
│   ├── index.ts
│   └── screen.tsx
└── epicGames/
    ├── api.ts
    ├── hooks.ts
    ├── index.ts
    └── screen.tsx

接口选择与兼容性

• 统一选用社区提供的聚合接口服务，支持 JSON 与纯文本返回，接口稳定且无需密钥：
  • 60秒读懂世界：https://60s.viki.moe/60s?v2=1（推荐 v2）或纯文本 ?e=text
  • 必应每日壁纸：https://60s.viki.moe/bing，纯文本直链：?e=text
  • 汇率查询：https://60s.viki.moe/ex-rates?c=CNY
  • 历史上的今天：https://60s.viki.moe/today_in_history，纯文本：?e=text
  • Epic 免费游戏：https://60s.viki.moe/epic

参考说明与更详细文档可见：

• Viki 60s API 文档（含 v2 与各功能说明）：https://60s.viki.moe/ （参考）

模块实现要点

• 每个模块包含 api.ts（数据获取）、hooks.ts（状态管理）、screen.tsx（展示）
• 统一使用内置 fetch，不引入第三方库，保证 RN 与 HarmonyOS 兼容

每天60秒读懂世界

• 获取文本列表，简单分行显示
• 代码位置：bundles/world60s/api.ts:1、bundles/world60s/screen.tsx:1

必应每日壁纸

• 获取图片直链并展示大图
• 代码位置：bundles/bingWallpaper/api.ts:1、bundles/bingWallpaper/screen.tsx:1

当日货币汇率

• 支持自定义基准货币（默认 CNY），展示前 30 条汇率
• 代码位置：bundles/currencyRates/api.ts:1、bundles/currencyRates/screen.tsx:1

历史上的今天

• 纯文本模式展示当日历史事件摘要
• 代码位置：bundles/historyToday/api.ts:1、bundles/historyToday/screen.tsx:1

Epic Games 免费游戏

• 展示当前免费促销/领取信息，支持跳转至活动链接
• 代码位置：bundles/epicGames/api.ts:1、bundles/epicGames/screen.tsx:1

集成到主应用

• 主界面采用底部选项栏，五个功能作为底部选项，点击切换对应模块
• 集成代码位置：App.tsx:98（模块导入）与 App.tsx:104（切换与渲染逻辑）

关键实现片段解读

• 功能切换状态管理：App.tsx:105
• 底部选项栏渲染（带图标与高亮背景、震动反馈）：App.tsx:149 至 App.tsx:198
• 各模块渲染入口：App.tsx:141 至 App.tsx:145
• 双击返回顶部：App.tsx:161 至 App.tsx:170
• 长按刷新当前模块：App.tsx:172 至 App.tsx:175
• 动态徽标角标：App.tsx:189 至 App.tsx:193
• 深色主题细粒度配色：App.tsx:115 至 App.tsx:122

三端运行验证

• Android：npm run android
• iOS：npm run ios
• HarmonyOS：npm run harmony

HarmonyOS 打包与资源

• 打包生成 harmony/entry/src/main/resources/rawfile/bundle.harmony.js
• 路径位置：harmony/entry/src/main/resources/rawfile/bundle.harmony.js

常见问题与处理

• 接口文本返回为空或延迟：切换至 JSON 返回，或在 UI 中增加错误与加载态（各模块 hooks.ts 已统一实现）
• Epic 游戏列表为空：可能为活动周期切换，稍后重试
• 汇率基准代码不合法：输入需为 ISO 货币代码，例如 USD、CNY

成果展示

• 主页底部提供五个带图标选项按钮，点击切换模块并支持轻微震动反馈与高亮背景
• 交互轻量，无外部依赖，兼容 Android/iOS/HarmonyOS 三端

---

🐛 常见问题排查

Metro 服务器问题

# 清理 Metro 缓存
npm start -- --reset-cache

Android 构建问题

# 清理 Android 构建
cd android && ./gradlew clean

iOS 依赖问题

# 重新安装 Pods
cd ios && pod install

HarmonyOS 打包问题

• 确保已安装 HarmonyOS 开发环境
• 检查 harmony 目录结构是否正确
• 验证 Metro 配置是否正确集成

---

📚 相关资源

• React Native 官方文档
• HarmonyOS 开发文档
• TypeScript 官方文档
• Metro Bundler 文档

---

🎓 总结

DailyHotBundle 项目展示了如何使用 React Native 构建支持 Android、iOS 和 HarmonyOS 三端的移动应用。通过集成 @react-native-oh/react-native-harmony，项目实现了真正的跨平台开发，为开发者提供了一个统一的开发体验。

项目的架构设计合理，配置完善，代码结构清晰，是一个很好的跨平台移动应用开发起点。无论是想要学习 React Native 跨平台开发，还是需要开发支持 HarmonyOS 的应用，这个项目都提供了很好的参考。