# rn-duolingo-test **Repository Path**: chenbool/rn-duolingo-test ## Basic Information - **Project Name**: rn-duolingo-test - **Description**: rn-duolingo 界面 测试 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-04-26 - **Last Updated**: 2026-04-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Duolingo Clone - 语言学习应用 一款基于 React Native + Expo 开发的多邻国风格语言学习应用，支持课程学习、音标学习、商店系统和用户档案管理。 ## 技术栈 - **框架**: React Native 0.81.4 + Expo SDK 54 - **路由**: Expo Router 5.0 - **动画**: React Native Reanimated 4.1 - **状态管理**: React Hooks (useState, useContext) - **存储**: AsyncStorage (本地数据持久化) - **音频**: expo-av (音效播放) - **语言**: TypeScript 5.9 ## 项目结构 ``` duolingo/ ├── app/ # 页面路由 (Expo Router) │ ├── _layout.tsx # 根布局配置 │ ├── index.tsx # 主页 - 课程路径 │ ├── lesson.tsx # 课程学习页 │ ├── phonetic.tsx # 音标学习页 │ ├── shop.tsx # 商店页 │ └── profile.tsx # 个人资料页 │ ├── components/ # 可复用组件 │ ├── index.ts # 组件统一导出 │ ├── BottomNav.tsx # 底部导航栏 │ ├── StatusBar.tsx # 顶部状态栏 │ ├── PhoneticCard.tsx # 音标卡片 │ ├── LessonNode.tsx # 课程节点 │ ├── EndSection.tsx # 课程终点 │ ├── UnitHeader.tsx # 单元标题 │ ├── PathConnector.tsx # 路径连接线 │ └── CurrentLabel.tsx # 当前课程标签 │ ├── config/ # 配置文件 │ ├── index.ts # 配置统一导出 │ ├── colors.ts # 主题颜色 │ └── constants.ts # 应用常量 │ ├── utils/ # 工具函数 │ ├── index.ts # 工具统一导出 │ ├── audio.ts # 音频播放工具 │ ├── storage.ts # 本地存储工具 │ └── helpers.ts # 通用辅助函数 │ ├── api/ # API 接口层 │ ├── index.ts # API统一导出 │ ├── client.ts # HTTP 客户端 │ ├── user.ts # 用户接口 │ ├── lesson.ts # 课程接口 │ └── shop.ts # 商店接口 │ ├── database/ # 数据层 │ ├── index.ts # 数据库统一导出 │ ├── schema.ts # 数据模型定义 │ └── queries.ts # 数据库查询 │ ├── assets/ # 静态资源 │ ├── sounds/ # 音频文件 │ └── images/ # 图片资源 │ ├── package.json # 项目依赖 ├── app.json # Expo 配置 └── tsconfig.json # TypeScript 配置 ``` ## 核心功能 ### 1. 课程系统 - **蛇形课程路径**: 类似 Duolingo 的阶梯式课程布局 - **课程状态**: 已完成(绿色)、当前(红色)、可解锁(蓝色)、锁定(灰色) - **动画效果**: 节点入场动画、脉冲动画、路径连接线动画 ### 2. 音标学习 - **完整音标表**: - 单元音: 9个 (/æ/, /e/, /ɪ/ 等) - 双元音: 8个 (/eɪ/, /aɪ/, /əʊ/ 等) - 清辅音: 6个 (/p/, /t/, /k/ 等) - 浊辅音: 11个 (/b/, /d/, /g/ 等) - 特殊组合: 23个 (TH, SH, CH, TION等) - **音频播放**: 点击卡片播放单词发音，支持连续播放两遍 - **视觉反馈**: 播放时显示加载动画和边框高亮 ### 3. 商店系统 - **道具购买**: 双倍经验、连胜保护、生命值礼包、传奇挑战 - **连胜保护**: 1天/3天/7天多种选择 - **会员系统**: Duolingo Super 会员展示 ### 4. 个人资料 - **用户统计**: 连胜天数、总XP、当前联赛、好友数量 - **成就系统**: 已完成/未完成的成就展示 - **语言学习**: 正在学习的语言及进度 ## 快速开始 ### 环境要求 - Node.js >= 18 - npm >= 9 或 yarn >= 1.22 - Expo CLI (可选) ### 安装依赖 ```bash npm install ``` ### 启动开发服务器 ```bash # 启动 Expo 开发服务器 npm start # 或指定平台 npm run android # Android npm run ios # iOS (需要 macOS) npm run web # Web 端 ``` ### 构建发布版本 ```bash # Android APK expo build:android # iOS 归档 expo build:ios ``` ## 配置说明 ### 主题颜色 位于 `config/colors.ts`: ```typescript export const Colors = { primary: '#58CC02', // 主绿色 primaryDark: '#58A700', // 深绿色 secondary: '#1CB0F6', // 蓝色 danger: '#FF4B4B', // 红色 warning: '#FF9600', // 橙色 background: '#FFFFFF', // 背景白 surface: '#F7F7F7', // 卡片灰 text: '#4B4B4B', // 主文字 textSecondary: '#777777',// 次要文字 } ``` ### 动画配置 位于 `config/constants.ts`: ```typescript export const ANIMATION_CONFIG = { duration: { fast: 200, normal: 300, slow: 500, }, spring: { damping: 15, stiffness: 150, }, } ``` ## 组件说明 ### PhoneticCard - 音标卡片 ```typescript interface PhoneticCardProps { letter: string; // 字母/组合 (如 "A", "TH") phonetic: string; // 音标符号 (如 "/æ/") example: string; // 示例单词 (如 "cat") index: number; // 索引(用于动画延迟) onPress?: () => void;// 点击回调 } ``` ### LessonNode - 课程节点 ```typescript interface LessonNodeProps { status: 'locked' | 'available' | 'current' | 'completed'; number: number; index: number; } ``` ## API 接口 ### 音频工具 (utils/audio.ts) ```typescript // 播放单词发音 playWord(word: string): Promise // 连续播放两遍 playPhoneticSequence(word: string): Promise // 播放音效 playCorrectSound(): Promise playWrongSound(): Promise ``` ### 存储工具 (utils/storage.ts) ```typescript // 保存数据 setItem(key: string, value: any): Promise // 读取数据 getItem(key: string): Promise // 删除数据 removeItem(key: string): Promise ``` ## 路由导航 基于 Expo Router 的文件系统路由: | 路由 | 文件 | 说明 | |------|------|------| | `/` | `app/index.tsx` | 主页 - 课程路径 | | `/lesson` | `app/lesson.tsx` | 课程学习 | | `/phonetic` | `app/phonetic.tsx` | 音标学习 | | `/shop` | `app/shop.tsx` | 商店 | | `/profile` | `app/profile.tsx` | 个人资料 | ## 开发规范 ### 代码风格 - 使用 TypeScript 严格模式 - 组件使用函数式组件 + Hooks - 样式使用 StyleSheet.create - 颜色/常量统一从 config 导入 ### 文件命名 - 组件: PascalCase (如 `PhoneticCard.tsx`) - 工具: camelCase (如 `audio.ts`) - 页面: 小写 (如 `index.tsx`) ### 导入顺序 ```typescript // 1. React/React Native import React from 'react'; import { View, Text } from 'react-native'; // 2. 第三方库 import { useSharedValue } from 'react-native-reanimated'; // 3. 项目内部 import { Colors } from '../config'; import { playWord } from '../utils/audio'; ``` ## 性能优化 - **音频播放**: 使用 Map 存储多个实例，避免冲突 - **动画**: 使用 Reanimated 原生线程执行 - **列表**: 使用 ScrollView + 虚拟化优化 - **图片**: 使用 expo-image 缓存机制 ## 待办事项 - [ ] 集成真实的用户认证系统 - [ ] 添加课程进度云端同步 - [ ] 实现每日提醒推送 - [ ] 添加社交功能(好友对战) - [ ] 支持更多语言课程 - [ ] 添加离线模式 ## 贡献指南 1. Fork 项目 2. 创建功能分支 (`git checkout -b feature/xxx`) 3. 提交更改 (`git commit -m 'Add xxx'`) 4. 推送分支 (`git push origin feature/xxx`) 5. 创建 Pull Request ## 许可证 MIT License - 详见 [LICENSE](LICENSE) 文件 ## 致谢 - 设计灵感来源于 [Duolingo](https://www.duolingo.com/) - 音标音频来自 [Oxford Dictionary](https://www.lexico.com/) - 图标使用 [Expo Vector Icons](https://docs.expo.dev/guides/icons/) --- **版本**: 1.0.0 **作者**: Duolingo Clone Team **更新时间**: 2024年