React Native

这是我们 University Ranking Frontend 代码深度分析的第二部分。确保你已经阅读了 https://xiaruize.org/zh/post/university-ranking-frontend/ 和 https://xiaruize.org/zh/post/university-ranking-frontend-part-1/。 概述 在第二部分，我们将探索： ThemeContext - 实现带平台特定持久化的主题切换 LanguageContext - 管理国际化和语言偏好 RankingsProvider - 使用 React Query 进行后台数据同步 React Query Hooks - 构建可重用的数据获取模式 平台特定优化 - 不同方式处理 iOS、Android 和 Web ThemeContext：主题管理 ThemeContext 管理整个应用的视觉主题——浅色模式、深色模式或自动（跟随系统偏好）。以下是完整的实现： 主题对象 export const lightTheme = { background: Platform.OS == 'android' ? '#ffffff' : '#f8f9fa', surface: '#ffffff', surfaceSecondary: '#f1f3f5', primary: '#4a90e2', text: '#2c3e50', textSecondary: '#6c757d', border: '#e1e5e9', card: '#ffffff', input: '#ffffff', shadow: '#000', }; export const darkTheme = { background: Platform.OS == 'android' ? '#121212' : '#121212', surface: '#1e1e1e', surfaceSecondary: '#434343ff', primary: '#4a90e2', text: '#ffffff', textSecondary: '#b0b0b0', border: '#333333', card: '#2a2a2a', input: '#2a2a2a', shadow: '#000', }; 注意： background 在 Android 和 iOS 之间不同。这是 Vibe Coding 的实际应用——当 AI 生成平台特定代码时，它经常发现手动编码可能错过的这种细微差别。 ...

这是我们 University Ranking Frontend 代码深度分析的第一部分。如果你还没有阅读 https://xiaruize.org/zh/post/university-ranking-frontend/ 介绍，我建议从那里开始。 概述 在第一部分，我们将探索： 导航编排 - 如何在 App.js 中编排底部标签和堆栈导航器 SearchScreen 实现 - 用实时过滤构建主搜索界面 DetailPage 构造 - 显示包含动态内容的全面大学资料 API 集成 - 用 axios 获取数据并处理异步操作 架构课程：我们为什么使用这种导航模式 许多开发者会过度思考导航。University Ranking Frontend 使用一个简单但强大的模式： 底部标签 ├── 首页（搜索） │ └── 堆栈导航器 │ ├── SearchScreen │ ├── DetailPage │ └── UniversitySourceRankingsPage ├── 学科排名 │ └── 堆栈导航器 │ ├── SubjectRankingsPage │ ├── RankingDetailPage │ └── DetailPage ├── 收藏 │ └── 堆栈导航器 │ └── FavoritesScreen └── 我的（个人资料） └── 堆栈导航器 └── MeScreen 为什么这样有效： ...

介绍 University Ranking Frontend 是一个精细的 React Native 应用，展示了如何使用 Vibe Coding 构建生产级移动体验——一种开发哲学，其中 AI 协助指导架构决策、简化状态管理并加速功能实现。 与构建后端服务不同（需要谨慎的数据库设计和算法优化），前端开发通常关乎创建直观的用户体验和管理复杂的应用状态。在本系列中，我们将探索 Vibe Coding 如何将前端开发从劳动密集型过程转变为迭代的、AI 协助的协作，生成干净、可维护的代码。 什么是 Vibe Coding？ Vibe Coding 意味着与 AI 协作构建软件，利用机器学习模型来： 生成架构模式，符合问题空间的需求 建议状态管理解决方案，适配你的数据流 加速组件开发，通过智能代码生成 验证设计模式，在实现前识别潜在改进 快速迭代功能，通过 AI 生成的模板代码和脚手架 对于 University Ranking Frontend，Vibe Coding 帮助我们： 选择 React Native + Expo 作为开发框架，基于对跨平台支持的需求（iOS、Android、Web） 设计 Context API 系统，用于主题、语言和排名管理，无需过度工程化 构造 API 集成，使用 React Query 进行高效的数据获取和缓存 构建 UI 组件，无缝适配深色模式和语言切换 实现搜索过滤，提供响应迅速的原生体验 项目概述 University Ranking Frontend 是一个移动优先的应用，允许用户： 搜索大学，按名称、国家或城市实时筛选 查看详细排名，跨多个排名系统（QS、US News 等） 切换主题（浅色/深色模式），带持久化偏好 切换语言（英文/中文），完全本地化 UI 保存收藏，快速访问经常查看的大学 比较排名，跨不同指标和来源 技术栈 核心框架： ...