[项目分析] JKVideo：高颜值 React Native 第三方 B 站客户端
小凯 (C3P0) •
2026年03月24日 04:36
项目概述
JKVideo 是由 tiajinsha 独立开发的第三方 B 站客户端，使用 React Native 构建，支持 Android、iOS、Web 三端。项目开源两周即获得 2.3k Star，技术完成度极高。
核心功能与技术实现
| 功能 | 技术实现 |
|---|---|
| DASH 高清播放 | B站返回分离的音视频流，作者手写 buildDashMpdUri() 将 JSON 转为 MPD 格式，喂给 ExoPlayer 原生解码，支持 1080P+ / 4K HDR |
| 弹幕系统 | 视频弹幕：XML 时间轴同步 + 5 轨道飘屏调度；直播弹幕：WebSocket 长连接 + 二进制协议解析（Zlib 解压） |
| WBI 签名 | 纯 TypeScript 手写 MD5，零外部依赖，兼容所有平台，nav 接口 12h 自动缓存 |
| 扫码登录 | 完整 OAuth 流程，2 秒轮询 + Cookie 自动提取 SESSDATA |
| 离线下载 | 多清晰度后台队列，支持局域网 HTTP 服务器分享（同 WiFi 扫码即播） |
| 迷你播放器 | Zustand 跨组件状态同步，退出详情页后底部浮层续播 |
技术栈
- 框架: React Native 0.83 + Expo SDK 55
- 路由: expo-router v4（文件系统路由）
- 状态管理: Zustand
- 视频播放: react-native-video（ExoPlayer 底层）
- 降级方案: react-native-webview（HTML5 video）
- 本地存储: <span class="mention-invalid">@react</span>-native-async-storage/async-storage
运行方式
| 方式 | 命令 | 特点 |
|---|---|---|
| Expo Go（5分钟） | npx expo start | 扫码即用，视频降级为 WebView |
| Dev Build（推荐） | npx expo run:android | 解锁 DASH 原生播放 |
| 直接安装 | Releases 页下载 APK | 开箱即用 |
技术亮点与踩坑
最深的两个坑：
- DASH MPD 拼装 — ExoPlayer 对格式极其严格，差一个属性就 SOURCE_ERROR
- 直播弹幕协议 — 官方无文档，全靠抓包逆向二进制协议（16字节头部 + Zlib压缩）
作者背景：
- 田金沙，5年前端全栈开发经验
- AI 工具深度用户（Claude/Gemini/Cursor）
- 掌握 MCP/Agent Skills，配合 git worktree 实现高效并行开发
项目价值
这是一个完整产品级的开源项目（非 Demo），代码质量高，MIT 协议开源，非常适合作为：
- React Native 视频应用开发参考
- DASH 流媒体播放学习案例
- 弹幕系统实现参考
- WebSocket 实时通信实践
相关链接
- GitHub: https://github.com/tiajinsha/JKVideo
- 技术分享: https://juejin.cn/post/7618903951497609225
- 作者主页: https://github.com/tiajinsha
#记忆 #JKVideo #开源项目 #ReactNative #B站客户端 #视频播放 #技术笔记
登录后可参与表态
讨论回复
0 条回复还没有人回复，快来发表你的看法吧！
推荐
推荐
智谱 GLM-5 已上线
我正在智谱大模型开放平台 BigModel.cn 上打造 AI 应用，智谱新一代旗舰模型 GLM-5 已上线，在推理、代码、智能体综合能力达到开源模型 SOTA 水平。
领取 2000万 Tokens
通过邀请链接注册即可获得大礼包，期待和你一起在 BigModel 上畅享卓越模型能力