一、前言

       本文完整复盘开源鸿蒙跨平台开发第一阶段（DAY1-7）全流程实战任务。从初期的技术选型、环境搭建，到中期的美食 APP 核心功能开发，再到后期的问题排查、博文优化，逐步实现从「RN 鸿蒙基础工程」到「可运行美食博客 APP」的落地，兼顾技术深度、实战性、可读性，助力同类开发学习者快速上手 RN + 鸿蒙跨平台开发。

二、DAY1-6 总览

本阶段任务按 “基础铺垫→功能开发” 分层推进，聚焦 “工程落地” 与 “业务实现”：

开源鸿蒙跨平台开发技术栈选型与RN环境搭建

开源鸿蒙跨平台开发 DAY2：本地工程上传 AtomGit 仓库踩坑 + 可复现验证全记录

React Native开源鸿蒙跨平台工程 DAY3：网络请求集成和美食博客页面开发

React Native 开源鸿蒙跨平台工程 DAY4~6：列表交互能力开发与多状态提示实现

 

三、基础设施与工程化（Day1-Day2）

工程化是项目稳定的基石，初期聚焦环境搭建与代码版本控制，完成从 “工具准备” 到 “工程落地” 的闭环。

3.1 开发环境搭建（Day1）

核心完成 RN、鸿蒙相关工具安装与关键配置，解决 Win11 家庭版无 Hyper-v 的调试难题：

  • 安装核心工具：Node.js、RN 0.72.5、DevEco Studio、开源鸿蒙 SDK、VS Code、Git
  • 关键环境配置：
  1. 配置 npm 华为云镜像源（解决依赖下载问题）： 
    npm config set strict-ssl=false
npm config set sslVerify=false
npm config set registry=https://repo.huaweicloud.com/repository/npm/
npm cache clean --force

  2. 配置 hdc 环境变量：将 OpenHarmony SDK 下toolchains目录添加至系统 PATH，配置HDC_SERVER_PORT、CAPI 版本环境变量。
  • 工程创建命令： 
    npx react-native@0.72.5 init AtomGitNews --version 0.72.5

  • 调试解决方案：Win11 家庭版不支持 Hyper-v，放弃本地模拟器，采用华为官方在线云调试完成工程运行验证
运行成果

3.2 代码托管与工程优化（Day2）

完成 Git+AtomGit 代码托管，优化工程基础配置，为后续开发铺路：

  • Git 提交关键命令： 
    git init
git remote add origin https://atomgit.com/xxxxxy1220/hellogitt.git
git add .
git commit -m "RN鸿蒙基础工程：环境配置完成，工程初始化成功"
git push -u origin main

  • 鸿蒙工程权限预留（module.json5）：提前配置网络权限节点，后续直接启用
"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
    "usedScene": {
      "ability": ["EntryAbility"],
      "when": "always"
    }
  }
]
运行成果

四、核心功能开发（Day3-Day6）

       从 “网络请求能力” 入手，完成美食 APP 的页面布局、交互逻辑开发，实现从 “空工程” 到 “可用应用” 的升级。

4.1网络请求封装与基础页面（Day3）

实现通用网络请求能力，完成首页、详情页布局与模拟数据渲染，是业务开发的基础：

  • 网络权限启用：module.json5中预留的ohos.permission.INTERNET权限正式生效；
  • axios 网络请求封装（network/axios.js，RN 端鸿蒙适配）： 
    import axios from 'axios';
const request = axios.create({
  baseURL: 'https://mock-api.food-blog.com',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});
// 请求拦截器
request.interceptors.request.use(config => config, error => Promise.reject(error));
// 响应拦截器：统一解析数据、处理异常
request.interceptors.response.use(
  response => {
    if (response.data.code !== 200) throw new Error(response.data.msg || '请求失败');
    return response.data.data;
  },
  error => {
    console.error('网络错误：', error.message);
    return Promise.reject(error);
  }
);
export default request;

  • 基础页面开发：使用 RN 原生ScrollView、FlatList、Image等组件，完成首页（轮播 + 分类 + 食谱列表）、详情页（用料 + 烹饪步骤）布局，通过封装的 request 请求模拟数据并渲染。
运行成果

4.2 列表核心交互与多状态提示（Day4-Day6）

       基于FlatList实现下拉刷新、上拉加载核心交互，添加状态锁避免重复请求，覆盖全场景数据提示，提升用户体验：

  • 核心交互代码（pages/RecipeList.js，关键片段）： 
    import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, RefreshControl, TouchableOpacity, StyleSheet } from 'react-native';
import request from '../../network/axios';

const RecipeList = () => {
  const [list, setList] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const [loading, setLoading] = useState(false);
  const [noMore, setNoMore] = useState(false);
  const [page, setPage] = useState(1);
  const pageSize = 10;

  // 数据加载方法：刷新/加载更多共用，添加状态锁
  const loadData = async (isRefresh = false) => {
    if ((isRefresh && refreshing) || (!isRefresh && loading)) return;
    try {
      isRefresh ? setRefreshing(true) : setLoading(true);
      const res = await request.get(`/recipes?page=${isRefresh ? 1 : page}&size=${pageSize}`);
      setList(isRefresh ? res : [...list, ...res]);
      setNoMore(res.length < pageSize);
      !isRefresh && setPage(prev => prev + 1);
    } catch (err) {
      console.error('数据加载失败：', err);
    } finally {
      setRefreshing(false);
      setLoading(false);
    }
  };

  useEffect(() => { loadData(true); }, []);

  // 渲染底部提示：加载中/无更多数据
  const renderFooter = () => {
    if (loading) return <Text style={styles.tip}>加载中...</Text>;
    if (noMore) return <Text style={styles.tip}>No more data</Text>;
    return null;
  };

  // 渲染空数据/加载失败提示
  const renderEmpty = () => (
    <View style={styles.emptyBox}>
      <Text style={styles.emptyText}>暂无食谱数据</Text>
    </View>
  );

  return (
    <FlatList
      data={list}
      keyExtractor={item => item.id.toString()}
      renderItem={({ item }) => (
        <TouchableOpacity style={styles.card}>
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.meta}>难度：{item.difficulty} | 耗时：{item.time}</Text>
        </TouchableOpacity>
      )}
      // 下拉刷新配置：显示Release to refresh
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={() => loadData(true)}
          title="Release to refresh"
          titleColor="#666"
        />
      }
      onEndReached={() => !noMore && loadData(false)}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
      ListEmptyComponent={renderEmpty}
    />
  );
};

const styles = StyleSheet.create({
  card: { padding: 16, margin: 12, backgroundColor: '#fff', borderRadius: 12 },
  title: { fontSize: 16, fontWeight: 'bold' },
  meta: { fontSize: 12, color: '#666', marginTop: 8 },
  tip: { textAlign: 'center', padding: 12, color: '#666' },
  emptyBox: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  emptyText: { fontSize: 16, color: '#666' }
});

export default RecipeList;
    运行成果
  1. 下拉刷新：下拉时显示「Release to refresh」文字提示，刷新中保持加载状态；
  2. 上拉加载：列表底部显示「加载中...」，无更多数据时显示「No more data」；
  3. 空数据 / 加载失败：页面中央显示「暂无食谱数据」或「加载失败，点击重试」。

五、DAY7：全流程复盘 + 博文优化 + 核心知识梳理

       完成 DAY1-6 的所有开发任务后，进入 DAY7 核心复盘阶段，不新增任何功能，聚焦「全流程踩坑总结、博文优化、核心知识梳理」。

1. 全流程开发复盘

总结开发中核心问题的解决思路，避免同类错误：

1）最大踩坑点：Win11 家庭版鸿蒙模拟器运行问题
  • 问题表现：无法开启 Hyper-v，本地模拟器无法运行，第三方模拟器兼容性差；
  • 解决方案：短期使用华为官方在线云调试完成开发与测试，长期可升级 Win11 专业版或安装虚拟机开启 Hyper-v；
  • 经验总结：开发前需先检查系统环境与开发工具的兼容性，提前规避硬件 / 系统层面的限制，节省开发时间。
2）核心配置踩坑点：环境变量与权限配置
  • 问题表现：hdc 命令无法全局调用、网络请求权限不足；
  • 解决方案：严格按步骤配置环境变量，配置后打开新命令行验证；鸿蒙权限需在module.json5中完整声明并指定usedScene，确保权限生效；
  • 经验总结：RN 鸿蒙跨平台开发对配置要求严格，每一步配置均需验证，权限、环境变量等核心配置不可遗漏。
3）功能开发小问题：交互组件属性适配
  • 问题表现：下拉刷新文字未显示、上拉加载频繁触发；
  • 解决方案：RN 组件在鸿蒙端需显式配置部分属性，列表交互需添加状态锁管理；
  • 经验总结：RN 原生组件在鸿蒙端存在少量属性兼容问题，开发中需按需显式配置，核心交互需做好状态管理。

2.RN 适配开源鸿蒙开发核心知识梳理

梳理 DAY1-7 的核心知识点，形成体系化的知识清单，涵盖环境搭建、工程配置、功能开发、问题解决四大维度，为后续开发与复盘提供参考：

（1）环境搭建核心知识
  1. RN 技术选型的核心考量因素（跨平台、技术储备、性能、生态）；
  2. RN 适配开源鸿蒙的全套环境配置步骤（hdc、npm 镜像源、环境变量）；
  3. Win11 家庭版鸿蒙开发的替代方案（华为云调试）；
  4. 环境配置验证的关键命令（hdc -v /npm -v /node -v）。
（2）工程配置核心知识
  1. RN 工程创建：指定版本命令（npx react-native@x.x.x init 工程名 --version x.x.x）；
  2. 鸿蒙工程核心配置文件：module.json5（权限、能力配置）；
  3. RN 与鸿蒙工程的联动要求：依赖版本兼容、配置一致；
  4. Git+AtomGit 代码提交完整流程（初始化→关联→提交→推送）。
（3）功能开发核心知识
  1. 鸿蒙网络权限配置：ohos.permission.INTERNET完整声明方式；
  2. axios 网络请求封装：请求 / 响应拦截、超时处理、异常分类捕获；
  3. RN FlatList 核心用法：下拉刷新（RefreshControl）、上拉加载（onEndReached）、性能优化（initialNumToRender）；
  4. 列表交互状态管理：状态锁设计（解决重复请求）、多状态提示（加载中 / 失败 / 无更多 / 空数据）。
（4）问题解决核心知识
  1. 系统层面问题：Win11 家庭版 Hyper-v 开启方案、华为云调试使用方法；
  2. 配置层面问题：环境变量配置验证、鸿蒙权限生效条件；
  3. 功能层面问题：RN 组件鸿蒙适配属性配置、列表交互异常解决（状态锁）。

六、整体任务总结与后续规划

1. DAY1-7 整体成果（可落地、可验证、可复用）

经过 7 天的开发与复盘，完成了从「RN 鸿蒙环境搭建」到「美食 APP 落地」的全流程任务，所有成果均真实可验证：

  1. 环境与工程：完成 RN 适配开源鸿蒙的全套环境配置，创建基础工程并成功提交至 AtomGit 公开仓库，工程结构清晰、配置无报错；
  2. 功能开发：完成美食博客 APP 三大核心页面开发，实现网络请求、下拉刷新 / 上拉加载、多状态数据提示等核心功能，所有功能在华为云调试中运行稳定；
  3. 问题解决：解决 Win11 家庭版模拟器运行、环境配置、组件适配等多个核心问题，形成可复用的解决方案；

2. 后续功能拓展规划（基于现有工程，可逐步实现）

基于本次搭建的 RN 鸿蒙基础工程与美食 APP 核心功能，后续可逐步拓展以下功能，丰富应用体验，提升开发能力：

  1. 功能层：添加食谱搜索、分类筛选优化、评论发布、点赞收藏等功能；
  2. 体验层：集成专业刷新库（如 react-native-MJRefresh）优化交互体验，添加页面过渡动画，提升 UI 美观度；
  3. 数据层：对接真实的美食开放 API，替换模拟数据，实现数据动态加载；
  4. 部署层：升级 Win11 系统，解决本地模拟器运行问题，完成鸿蒙真机调试与部署。

七、代码仓库说明

       本次 DAY1-6 的所有开发代码，均按任务阶段规范提交至 AtomGit 公开仓库，全程增量提交，未覆盖仓库原有内容，工程结构清晰、提交记录可追溯，可直接拉取复现运行效果：

  • 仓库地址：https://atomgit.com/xxxxxy1220/hellogitt.git

欢迎加入开源鸿蒙跨平台社区
https://openharmonycrossplatform.csdn.net

# react native # 美食 # react.js
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

Flutter for OpenHarmony 实战：打造高颜值运动排行榜（上）— 自定义 Sliver 头部与动态卡片

avatar 人工智能6S服务平台
cover

Flutter for OpenHarmony 实战：打造高颜值运动排行榜（下）— 动效交互与性能优化

avatar 人工智能6S服务平台
cover

【开源鸿蒙跨平台开发先锋训练营】Flutter实现鸿蒙多个标签功能并完善模块

avatar 人工智能6S服务平台