Back to Projects

音乐播放器

基于 Expo SDK 54 的跨平台移动音乐播放器，采用粉紫渐变主题 UI，支持全屏播放、歌词同步与深色模式。

Mobile Dev
★ Featured
View on GitHub

Tech Stack

React Native
Expo SDK 54
TypeScript
Zustand
Project Details

音乐播放器

基于 Expo SDK 54 构建的跨平台移动音乐播放器，实现精美粉紫渐变 UI 与流畅交互体验。

核心特性

特性描述
全屏播放器渐变背景、专辑封面、进度条、歌词按钮一体化设计
歌词同步独立歌词模态框，毛玻璃效果，手势下滑关闭
音乐库管理4 Tab 导航：首页、搜索、音乐库、个人中心
深色模式自动适配系统主题，完整明暗切换

技术架构

分类技术栈
框架Expo SDK 54.0.31
核心React Native 0.81.5
路由Expo Router 6.0.22 (文件路由)
状态管理Zustand 5.0.10
动画React Native Reanimated 4.1.1
UI 效果expo-blur (毛玻璃), expo-linear-gradient

组件架构

App Layer (Expo Router)
├── _layout.tsx       → 根布局 + ThemeProvider
├── (tabs)/           → 4-Tab 导航
│   ├── index.tsx     → 首页 (NowPlayingCard + TrackList)
│   ├── search.tsx    → 搜索页
│   ├── library.tsx   → 音乐库
│   └── profile.tsx   → 个人中心

Component Layer
├── Header           → 用户信息 + 通知图标
├── NowPlayingCard   → 当前播放卡片 (点击打开全屏)
├── PlayerScreen     → 全屏播放器 Modal
├── LyricsScreen     → 歌词展示 Modal
├── CategoryList     → 分类横向滚动
├── CollectionList   → 专辑集合展示
└── TrackList        → 歌曲列表

State Layer (Zustand)
└── playerStore      → isPlaying, isPlayerOpen, isLyricsOpen, currentTrack

项目亮点

  • 浮动圆角 Tab Bar：毛玻璃背景，居中悬浮设计
  • 模块化组件：7 个音乐组件通过 Barrel Export 统一管理
  • 类型安全：完整 TypeScript 类型定义 (Track, Collection, NowPlayingState)
  • 零循环依赖：5 层清晰架构 (types → constants → store → components → app)