- 博客(25)
- 收藏
- 关注
RSS订阅原创 React Native for OpenHarmony 实战：Steam 资讯 App 帮助中心实现
本文介绍了如何实现一个完整的App帮助中心功能，包括内容组织、分类浏览和搜索功能。主要内容包括： 数据结构设计 定义了HelpCategory和HelpArticle两个接口，分别用于组织帮助分类和文章 通过categoryId建立分类与文章的关联关系 分类浏览功能 设计了5个主要帮助分类（快速开始、功能介绍等） 每个分类包含图标、标题和描述 实现分类列表展示和点击跳转 搜索功能实现 创建搜索框组件，支持实时搜索 实现不区分大小写的模糊搜索（匹配标题和内容） 动态显示搜索结果。
2026-01-12 18:12:18
351
原创 React Native for OpenHarmony 实战：Steam 资讯 App 关于我们页面
这篇文章介绍了如何实现一个专业的"关于我们"页面，包含以下核心内容： 页面规划：包含App信息、功能介绍、技术栈、联系方式和法律信息五大模块 实现方法： 使用配置对象集中管理App信息 设计视觉层级分明的信息卡片 通过数组定义功能和技术栈，提高可维护性 提供邮件等用户反馈渠道 关键设计点： 信息分类展示避免堆砌 建立视觉层级（图标>名称>描述） 展示技术栈增加专业透明度 配置化管理便于维护更新。
2026-01-12 18:09:58
346
原创 React Native for OpenHarmony 实战：Steam 资讯 App 通知设置实现
本文介绍了一个完整的通知设置系统实现，让用户能够灵活控制接收哪些类型的通知。首先定义了五种通知类型（新游戏发布、特惠信息、价格下降、成就相关和新闻更新），通过接口实现类型安全。然后展示了如何从全局状态管理通知设置，并提供UI开关让用户修改设置。文章详细说明了通知列表的布局和样式设计，包括标签、描述和开关的排列方式。最后介绍了Android系统通知权限的请求和检查流程，确保App能够正常发送通知。该系统设计灵活，便于维护和扩展新的通知类型。
2026-01-11 17:27:09
547
原创 React Native for OpenHarmony 实战：Steam 资讯 App 设置页面
本文介绍了如何实现一个功能完整的App设置页面，包括主题切换、语言选择和通知设置等核心功能。文章重点讲解了全局状态管理方案，通过定义AppState接口存储用户设置，并使用动态键名更新函数实现灵活配置。在UI实现方面，详细展示了主题切换按钮组、语言选项列表和通知开关组件的代码实现，强调使用条件样式和状态绑定来提升用户体验。此外，文章还提供了设置项分组的设计思路，通过ScrollView和分组标题使界面更加清晰有序。案例源码已开源，可供开发者参考实现类似的设置页面功能。
2026-01-11 17:24:28
458
原创 React Native for OpenHarmony 实战：Steam 资讯 App 个人中心页面
本文介绍了如何实现一个简洁实用的个人中心页面，主要包含三部分：用户信息卡片、统计数据展示和功能菜单列表。用户信息卡片展示头像、昵称和在线状态；统计数据区域显示收藏数、浏览数和游戏数；功能菜单通过可复用的ListItem组件实现导航功能。设计上采用Flexbox布局，使用Steam风格配色（蓝色#66c0f4和灰色#8f98a0），通过React Context管理全局状态数据（收藏和浏览历史）。虽然当前使用默认数据展示，但架构设计便于后续接入真实登录系统。完整代码已开源在AtomGit平台。
2026-01-10 15:08:18
190
原创 React Native for OpenHarmony 实战：Steam 资讯 App 浏览历史页面
本文介绍了游戏浏览历史记录功能的实现方案。该功能自动记录用户浏览过的游戏ID，采用简洁的数据结构设计：仅存储游戏ID而非完整信息，限制50条记录，按浏览时间排序并自动去重。页面实现包括从全局状态获取ID列表、并行加载游戏详情、展示带序号的游戏卡片以及清空历史功能。关键技术点包括使用Promise.all提升加载效率、基于history.length优化useEffect依赖、添加序号标记提升用户体验，以及空状态和危险操作确认等细节处理。该方案在保证功能完整性的同时，兼顾了性能和用户体验。
2026-01-10 15:06:53
827
原创 rn_for_openharmony_steam资讯app实战-我的收藏实现
摘要 本文介绍了如何在React Native for OpenHarmony应用中实现Steam资讯App的收藏功能。主要内容包括： 全局状态管理：使用全局状态存储游戏ID列表，通过toggleFavorite函数实现收藏/取消收藏功能，优化内存使用 收藏页面实现：基于收藏ID获取游戏详情，使用Promise.all并行加载数据，自动响应收藏状态变化 UI组件设计：包括游戏卡片展示、取消收藏按钮和空状态提示，提供良好的用户体验 性能优化：采用并行请求、数据缓存和条件渲染等技术提升应用性能 该方案实现了完整
2026-01-09 22:18:33
993
原创 rn_for_openharmony_steam资讯app实战-标签游戏列表实现
React Native for OpenHarmony 实战：Steam 资讯 App 标签游戏列表页面 本文介绍了使用 React Native for OpenHarmony 开发 Steam 资讯 App 中标签游戏列表页面的实现方法。该页面展示拥有特定标签的所有游戏，核心功能包括： 数据筛选逻辑：通过获取热门游戏详情并检查标签匹配来筛选游戏 状态管理：使用 useState 管理游戏列表、加载状态和排序方式 排序功能：实现默认、价格升序和价格降序三种排序方式 UI 设计：包含标签标题、排序按钮和游
2026-01-09 22:16:24
806
原创 rn_for_openharmony_steam资讯app实战-游戏标签实现
React Native OpenHarmony 实战：Steam 标签页实现 本文介绍了使用 React Native for OpenHarmony 开发 Steam 资讯 App 的标签页面实现方案。该页面通过动态提取游戏标签并统计出现频率，展示最热门的游戏特征标签。 核心实现要点： 从19款热门游戏详情中动态提取标签数据，而非静态维护 使用对象统计标签频率并转换为排序数组 实现实时搜索功能，支持大小写不敏感的模糊匹配 采用网格布局展示标签卡片，每行显示2个标签 卡片设计包含标签名称和出现次数
2026-01-08 21:42:05
688
原创 rn_for_openharmony_steam资讯app实战-分类游戏列表实现
本文介绍了使用React Native开发OpenHarmony版Steam资讯App分类游戏列表页面的实现方案。针对Steam没有分类查询API的问题，作者选择本地维护分类游戏列表的方式，手动定义每个分类下的热门游戏ID数组。页面核心逻辑通过useEffect根据分类ID并行加载游戏详情数据，并实现按价格排序功能。UI部分提供直观的排序按钮，使用FlatList渲染游戏列表并支持分页加载。该方案不依赖第三方服务，实现简单且性能良好，适合小型应用场景。
2026-01-08 21:33:26
906
原创 rn_for_openharmony_steam资讯app实战-游戏分类实现
本文介绍了如何在React Native for OpenHarmony中实现Steam资讯App的游戏分类页面。主要内容包括： 分类页面设计思路：展示所有分类、分类统计、快速导航和分类搜索功能 分类数据结构：使用id、name、icon和color等字段定义游戏分类 状态管理：处理分类列表、搜索查询和过滤结果 核心组件实现：分类卡片采用emoji图标和动态边框颜色设计 交互功能：实现实时搜索、网格布局展示和空状态提示 该方案通过简洁的UI设计和高效的交互逻辑，为用户提供了便捷的游戏分类浏览体验。
2026-01-07 22:49:48
951
原创 rn_for_openharmony_steam资讯app实战-搜索结果实现
React Native for OpenHarmony 实战：Steam 资讯 App 搜索结果页面 本项目实现了 Steam 游戏资讯 App 的搜索结果页面功能，核心包括： 搜索结果展示 - 显示匹配搜索词的游戏列表，包含游戏名称、Logo 和价格信息 排序功能 - 支持按相关性、价格升序/降序、评分等多种排序方式 过滤功能 - 可按免费、付费、打折等条件筛选游戏 状态管理 - 采用分离式状态设计（allResults/displayResults），提升过滤性能 数据获取 - 通过 Steam AP
2026-01-06 22:43:02
832
原创 rn_for_openharmony_steam资讯app实战-搜索实现
React Native for OpenHarmony 实战：Steam 资讯 App 搜索功能 本文介绍了使用 React Native for OpenHarmony 开发 Steam 资讯 App 的搜索功能实现。主要内容包括： API 集成：调用 Steam 的 storesearch 接口实现游戏搜索功能，处理 URL 编码和返回数据结构解析。 页面设计：采用分层布局，顶部搜索框支持实时搜索建议，中间区域展示搜索结果或搜索历史。 核心功能： 状态管理：使用 useState 管理搜索词、结果、加
2026-01-06 22:31:28
798
原创 rn_for_openharmony_steam资讯app实战-评测信息实现
本文介绍了使用React Native开发OpenHarmony版Steam资讯App中游戏评测页面的实现方法。该页面主要展示游戏评价数据，包括： 数据获取：通过appdetails API获取游戏评测统计信息，包含总评测数、好评率、专业评分等关键数据。 页面布局：分为评测统计区、评分分布图和评测列表三部分。统计区展示总体评价、评分、好评率和总评测数；分布图用进度条直观显示好评差评比例。 核心实现： 使用useState管理游戏数据、评测列表和统计状态 通过useEffect加载数据并计算统计值 采用Fla
2026-01-05 21:54:48
702
原创 rn_for_openharmony_steam资讯app实战-游戏视频实现
本文介绍了如何使用 React Native for OpenHarmony 开发 Steam 资讯 App 的游戏视频页面。该页面从 Steam API 获取游戏视频数据，包含视频列表展示和播放功能。文章详细讲解了数据结构、页面布局、核心代码实现，包括数据加载、视频列表渲染、播放器集成等关键功能。特别强调了性能优化措施如图片缓存、错误处理，以及用户体验设计如加载状态和空状态处理。该实现可作为 React Native 在 OpenHarmony 平台上开发多媒体应用的参考案例。
2026-01-05 21:20:37
899
原创 rn_for_openharmony_steam资讯app实战-游戏截图实现
本文介绍了使用React Native开发OpenHarmony平台Steam资讯App中的游戏截图页面实现。通过调用appdetails API获取游戏截图数据，包含缩略图和完整图片URL。页面采用2列网格布局展示缩略图，点击可预览完整图片。关键实现包括：使用FlatList优化网格性能、图片缓存策略、Modal实现图片预览、以及加载/空状态处理。样式设计注重用户体验，通过flex布局、固定宽高比和圆角等提升视觉效果。该方案实现了高效的图片展示和流畅的交互体验。
2026-01-04 21:13:39
538
原创 rn_for_openharmony_steam资讯app实战-游戏成就实现
React Native for OpenHarmony 实战：Steam 游戏成就页面开发 本文介绍了使用 React Native for OpenHarmony 开发 Steam 游戏成就页面的关键实现。通过整合 Steam 的两个 API（GetSchemaForGame 和 GetGlobalAchievementPercentagesForApp），开发者可以获取游戏成就数据并进行聚合处理。页面展示了成就统计信息（总成就数/已解锁数）和可排序的成就列表，支持按难度（全球达成率）或名称排序。技术实
2026-01-04 21:07:56
685
原创 rn_for_openharmony_steam资讯app实战-游戏新闻实现
本文介绍了使用React Native开发OpenHarmony版Steam资讯App中游戏新闻页面的实现过程。主要技术点包括： 数据获取：通过Steam的GetNewsForApp API获取游戏新闻数据，解析返回的JSON格式新闻列表 核心功能实现： 使用useEffect处理数据加载 时间格式化函数将Unix时间戳转换为相对时间 FlatList渲染新闻列表，包含标题、时间、作者和内容摘要 交互设计： 使用TouchableOpacity实现点击反馈 处理加载状态和空数据状态 通过numberOfLi
2026-01-03 23:00:56
829
原创 rn_for_openharmony_steam资讯app实战-游戏详情实现
本文介绍了使用 React Native for OpenHarmony 开发 Steam 资讯 App 游戏详情页面的实战经验。文章重点讲解了如何聚合多个 Steam API 数据（包括游戏基本信息、在线玩家数、成就系统等），并详细分析了页面布局与核心代码实现。关键技术点包括：使用 Promise.all 进行并行 API 请求优化性能、合理处理加载和错误状态、实现收藏功能、展示价格折扣信息、设计快捷操作按钮以及格式化游戏信息展示。文章还提供了开源项目地址，展示了如何将 React Native 技术应用
2026-01-03 22:39:13
890
原创 rn_for_openharmony_steam资讯app实战-即将推出实现
本文介绍了如何使用React Native开发OpenHarmony平台的Steam资讯App中的"即将推出"页面。文章区分了"新品上架"和"即将推出"两个功能的差异，重点讲解了价格显示的特殊处理（未定价游戏显示"即将发售"）、预购游戏的处理逻辑以及代码实现细节。作者还回顾了featuredcategories接口系列开发经验，探讨了发售日期展示、空状态处理和错误处理等优化点。
2026-01-02 23:08:56
534
原创 rn_for_openharmony_steam资讯app实战-新品上架实现
本文介绍了如何使用 React Native for OpenHarmony 实现 Steam 资讯 App 的新品上架页面。该页面与其他列表页面（特惠、热销）具有相同的开发模式：获取数据、显示加载状态、渲染列表和跳转详情。文章分析了 featuredcategories 接口的数据结构，重点介绍了 new_releases 分类的数据特点，并展示了页面实现代码。通过比较多个列表页面的相似性，提出了代码复用的思路，建议抽象出通用的 GameListScreen 组件以提高开发效率。
2026-01-02 23:07:03
701
原创 rn_for_openharmony_steam资讯app实战-热销榜实现
React Native for OpenHarmony 实战：Steam 热销榜实现 本文介绍了使用 React Native for OpenHarmony 实现 Steam 热销榜页面的关键技术点： 数据获取：通过 featuredcategories API 获取 top_sellers 数据，游戏已按销量排序 排名展示：利用 map 的 index 参数为游戏名称添加排名前缀（如 "#1 Counter-Strike 2"） 价格处理：特殊处理免费游戏（final_price=
2026-01-01 21:45:06
867
原创 rn_for_openharmony_steam资讯app实战-特惠游戏实现
本文介绍了使用React Native开发OpenHarmony版Steam特惠游戏页面的实战过程。文章首先对比了特惠页面与精选页面的差异，重点分析了数据来源、展示重点和字段使用的不同。详细讲解了featuredcategories接口的数据结构，特别是specials分类下的游戏数据格式。在实现部分，着重阐述了价格展示的设计思路，包括折扣标签、划线原价和现价的组合展示方式，并提供了完整的代码实现和样式配置。最后还介绍了价格处理、数据加载等关键细节，为开发者提供了实用的参考案例。
2026-01-01 21:40:08
715
原创 rn_for_openharmony_steam资讯app实战-精选游戏实现
本文介绍了使用 React Native 开发 OpenHarmony 平台上 Steam 资讯 App 精选游戏页面的实现过程。文章首先分析了页面需求，包括数据加载、加载状态展示和游戏列表渲染等功能。然后详细说明了 Steam API 接口的数据结构和封装方式，重点介绍了 Loading 组件的实现和 GameCard 组件的复用设计。最后展示了精选游戏页面的完整代码实现，包括状态管理、数据加载和页面渲染逻辑。通过这个案例，开发者可以学习到 React Native 在 OpenHarmony 平台上的实
2025-12-31 23:01:23
787
原创 rn_for_openharmony_steam资讯app实战-首页实现
本文介绍了使用React Native for OpenHarmony开发Steam资讯App首页的实战经验。项目基于RN 0.72.5和@react-native-oh/react-native-harmony实现跨平台开发，利用Steam免费API获取游戏数据。重点讲解了全局状态管理采用React Context的方案，包括状态结构设计、导航实现和自定义Hook封装。文章还详细介绍了Header组件和GameCard组件的实现细节，如三栏布局、占位符使用和自动拼接图片URL等技巧。整个首页包含精选Ban
2025-12-31 22:59:39
650
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人