# rn-tiktok **Repository Path**: web_74/rn-tiktok ## Basic Information - **Project Name**: rn-tiktok - **Description**: 仿造 tiktok - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-04-30 - **Last Updated**: 2026-04-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README
# 🎵 TikTok Clone **基于 React Native + Firebase 的短视频社交应用** [![React Native](https://img.shields.io/badge/React%20Native-0.72.4-61DAFB?logo=react)](https://reactnative.dev/) [![Expo](https://img.shields.io/badge/Expo-49.0.7-000020?logo=expo)](https://expo.dev/) [![TypeScript](https://img.shields.io/badge/TypeScript-5.1.3-3178C6?logo=typescript)](https://www.typescriptlang.org/) [![Firebase](https://img.shields.io/badge/Firebase-10.3.0-FFCA28?logo=firebase)](https://firebase.google.com/) [![Redux](https://img.shields.io/badge/Redux%20Toolkit-1.9.5-764ABC?logo=redux)](https://redux-toolkit.js.org/) [![React Query](https://img.shields.io/badge/React%20Query-4.33.0-FF4154?logo=reactquery)](https://tanstack.com/query/latest)

功能特性 • 技术架构 • 快速开始 • 项目结构 • 国内替代方案

--- ## 📖 项目简介 本项目是一个使用 **React Native**、**Expo**、**TypeScript**、**Firebase** 和 **Redux** 构建的 TikTok 克隆应用，实现了完整的短视频社交功能。 > 🔗 基于 [SimCoder 的 TikTok 克隆教程](https://github.com/SimCoderYoutube/TiktokClone) 进行深度重构： > - ✅ 全面迁移至 **TypeScript**，提供完整类型支持 > - ✅ 升级至 **Firebase v10** 最新版本 > - ✅ 采用 **Redux Toolkit** 替代传统 Redux > - ✅ 集成 **React Query (TanStack Query)** 优化数据获取 --- ## ✨ 功能特性 ### 📱 核心功能模块 | 模块 | 功能描述 | 技术亮点 | |------|----------|----------| | 🔐 **认证系统** | 邮箱/密码注册登录、状态持久化 | Firebase Auth + Redux 状态管理 | | 📹 **视频创作** | 拍摄视频（最长60秒）、相册选择、生成封面缩略图 | Expo Camera + VideoThumbnails | | 🏠 **视频流** | 竖屏全屏播放、自动播放/暂停、点赞评论 | FlatList + expo-av 视频播放 | | 👤 **个人主页** | 展示用户信息、作品列表、关注/粉丝统计 | 自定义 Hooks 数据获取 | | 💬 **即时通讯** | 私聊功能、消息列表、实时更新 | Firestore 实时监听 | | 🔍 **用户搜索** | 邮箱模糊搜索、用户列表展示 | Firestore 查询优化 | | ✏️ **个人资料** | 编辑头像、昵称等个人信息 | 图片上传 + 数据更新 | ### 🎬 视频功能详情 - **智能播放控制**：基于 FlatList `onViewableItemsChanged` 实现视频自动播放/暂停 - **全屏沉浸体验**：适配屏幕高度，去除导航栏影响 - **交互遮层**：点赞按钮、评论入口、用户信息展示 - **视频元数据**：封面缩略图自动生成（拍摄后5秒帧） ### 💡 社交功能详情 - **点赞系统**：实时更新点赞数，触发云函数同步统计 - **评论系统**：底部弹窗评论列表，支持发送实时评论 - **关注体系**：双向关注关系，实时同步粉丝数 - **私信功能**：基于 Firestore 的实时聊天，消息列表按时间倒序 --- ## 🛠️ 技术架构 ### 前端技术栈 | 技术 | 版本 | 用途 | 说明 | |------|------|------|------| | React Native | 0.72.4 | 跨平台移动框架 | 基于 React 的原生应用开发 | | Expo | ~49.0.7 | 开发工具链 | 提供原生模块和构建工具 | | TypeScript | ^5.1.3 | 类型安全 | 全项目类型覆盖 | | Firebase SDK | ^10.3.0 | 后端服务 | Auth / Firestore / Storage | | Redux Toolkit | ^1.9.5 | 全局状态管理 | 用户认证状态、Modal 状态 | | React Query | ^4.33.0 | 服务端状态管理 | 用户数据、消息列表缓存 | | React Navigation | ^6.x | 路由导航 | Stack + Material Bottom Tabs | | expo-av | ~13.4.1 | 音视频播放 | 视频播放控制 | | expo-camera | ~13.4.2 | 相机功能 | 视频录制、前后切换 | ### 后端技术栈 | 技术 | 版本 | 用途 | 说明 | |------|------|------|------| | Firebase Functions | ^4.3.1 | 云函数 | 点赞/评论统计触发器 | | Firebase Admin | ^11.8.0 | 后台管理 | 数据库事务操作 | | Node.js | 18 | 运行环境 | Functions 运行时 | ### 数据库设计 ``` Firestore 集合结构: ├── post/ # 视频帖子 │ ├── {postId}/ │ │ ├── likes/{userId} # 点赞子集合 │ │ └── comments/{commentId} # 评论子集合 │ └── ... ├── user/ # 用户资料 │ ├── {userId}/ │ └── ... ├── chat/ # 聊天会话 │ ├── {chatId}/ │ │ └── messages/{messageId} # 消息子集合 │ └── ... └── following/{userId}/following/{targetUserId} # 关注关系 ``` --- ## 🚨 重要提示：国内使用限制 > ⚠️ **Firebase 在中国大陆地区无法直接访问** > > 由于网络限制，Firebase 服务（包括 Firestore、Authentication、Storage、Functions 等）在中国大陆无法正常访问。 > > **国内用户建议：** > - 🔧 开发阶段：使用 **VPN/代理** 进行开发测试 > - 🚀 生产环境：迁移至**国内云服务**（详见下方替代方案） --- ## 🚀 快速开始 ### 环境要求 | 工具 | 版本要求 | 用途 | |------|----------|------| | Node.js | ≥ 18 | 运行时环境 | | npm/yarn | latest | 包管理 | | Firebase CLI | latest | 部署云函数 | | Expo CLI | latest | 运行 React Native 应用 | | Android Studio / Xcode | latest | 模拟器/真机调试 | ### 1️⃣ 克隆项目 ```bash git clone https://github.com/kirkwat/tiktok.git cd tiktok ``` ### 2️⃣ 配置 Firebase #### 创建 Firebase 项目 1. 访问 [Firebase Console](https://console.firebase.google.com/) 2. 创建新项目，启用 **Firestore Database**、**Authentication**、**Storage** 3. 下载 `google-services.json` (Android) 和 `GoogleService-Info.plist` (iOS) #### 更新配置文件 | 文件路径 | 配置项 | 获取位置 | |----------|--------|----------| | `backend/.firebaserc` | Project ID | Firebase 项目设置 → 项目 ID | | `frontend/firebaseConfig.ts` | firebaseConfig | 项目设置 → 应用 → SDK 配置 | **firebaseConfig.ts 示例：** ```typescript export const firebaseConfig = { apiKey: "your-api-key", authDomain: "your-project.firebaseapp.com", projectId: "your-project-id", storageBucket: "your-project.appspot.com", messagingSenderId: "123456789", appId: "1:123456789:web:abcdef123456" }; ``` ### 3️⃣ 部署后端云函数 ```bash # 安装 Firebase CLI（如未安装） npm install -g firebase-tools # 登录 Firebase firebase login # 进入后端目录 cd backend/functions # 安装依赖 npm install # 编译 TypeScript npm run build # 部署云函数 firebase deploy --only functions ``` **云函数功能说明：** - `likeCreate`：点赞/评论创建时自动更新计数 - `likeDelete`：点赞/评论删除时自动更新计数 ### 4️⃣ 启动前端应用 ```bash # 进入前端目录 cd frontend # 安装依赖 npm install # 启动开发服务器 npm run start # 或指定平台 npm run android # Android npm run ios # iOS（需 macOS） ``` > 💡 首次启动需使用 **iOS 模拟器** 或 **Android 模拟器** 查看应用 --- ## ⚠️ 常见问题 ### Firestore 索引错误 **错误信息：** ``` FirebaseError: [code=failed-precondition]: The query requires an index. ``` **原因**：Firestore 复合查询需要预先创建索引 **解决方案：** 1. 点击错误信息中的链接 2. 在 Firebase Console 点击 **"创建索引"** 3. 等待索引构建完成（约 1-5 分钟） **需创建的索引：** | 集合 | 字段1 | 字段2 | 查询类型 | |------|-------|-------|----------| | post | creation | - | 降序 | | user | email | - | 升序 | ### 视频播放黑屏 **可能原因：** - 模拟器不支持视频播放，请使用真机测试 - 视频格式不支持（推荐使用 H.264 编码的 MP4） ### 相机权限问题 **Android**：需在 `app.json` 中声明权限： ```json { "android": { "permissions": ["CAMERA", "RECORD_AUDIO", "READ_EXTERNAL_STORAGE"] } } ``` --- ## 📁 项目结构 ``` tiktok/ ├── 📁 backend/ # 后端云函数 │ ├── 📁 functions/ │ │ ├── 📁 src/ │ │ │ └── index.ts # 云函数入口（点赞/评论触发器） │ │ ├── package.json │ │ └── tsconfig.json │ ├── .firebaserc # Firebase 项目配置 │ └── firebase.json # Firebase 服务配置 │ ├── 📁 frontend/ # React Native 应用 │ ├── 📁 src/ │ │ ├── 📁 components/ # UI 组件 │ │ │ ├── 📁 auth/ # 认证相关组件 │ │ │ ├── 📁 chat/ # 聊天组件 │ │ │ ├── 📁 general/ # 通用组件（视频播放器、导航栏） │ │ │ ├── 📁 modal/ # 弹窗组件（评论弹窗） │ │ │ ├── 📁 profile/ # 个人主页组件 │ │ │ └── 📁 search/ # 搜索组件 │ │ │ │ │ ├── 📁 screens/ # 页面组件 │ │ │ ├── 📁 auth/ # 登录/注册页 │ │ │ ├── 📁 camera/ # 相机拍摄页 │ │ │ ├── 📁 chat/ # 聊天列表/对话页 │ │ │ ├── 📁 feed/ # 视频流页 │ │ │ ├── 📁 profile/ # 个人主页/编辑页 │ │ │ ├── 📁 savePost/ # 发布视频页 │ │ │ └── 📁 search/ # 用户搜索页 │ │ │ │ │ ├── 📁 navigation/ # 路由导航配置 │ │ │ ├── main/ # 根导航器（Stack） │ │ │ ├── home/ # 底部 Tab 导航 │ │ │ └── feed/ # Feed 流导航 │ │ │ │ │ ├── 📁 redux/ # Redux 状态管理 │ │ │ ├── 📁 slices/ # State Slices │ │ │ │ ├── authSlice.ts # 认证状态 │ │ │ │ ├── chatSlice.ts # 聊天状态 │ │ │ │ ├── modalSlice.ts # 弹窗状态 │ │ │ │ └── postSlice.ts # 帖子状态 │ │ │ └── store.ts # Store 配置 │ │ │ │ │ ├── 📁 hooks/ # 自定义 Hooks │ │ │ ├── useUser.ts # 获取用户数据 │ │ │ ├── useChats.ts # 获取聊天列表 │ │ │ ├── useMessages.ts # 获取消息列表 │ │ │ ├── useFollowing.ts # 获取关注状态 │ │ │ └── useFollowingMutation.ts # 关注操作 │ │ │ │ │ ├── 📁 services/ # API 服务层 │ │ │ ├── posts.ts # 帖子相关 API │ │ │ ├── user.ts # 用户相关 API │ │ │ ├── chat.ts # 聊天相关 API │ │ │ └── utils.ts # 工具函数（上传等） │ │ │ │ │ └── 📁 styles/ # 全局样式配置 │ │ │ ├── 📁 assets/ # 静态资源 │ ├── 📁 types/ # TypeScript 类型定义 │ ├── App.tsx # 应用入口 │ ├── firebaseConfig.ts # Firebase 配置 │ └── package.json │ └── README.md ``` --- ## 🎯 待办事项 - [ ] **下拉刷新**：主页/信息流/聊天列表支持下拉刷新 - [ ] **分享功能**：分享帖子到私信或其他社交平台 - [ ] **推荐算法**：实现 For You 个性化推荐页面 - [ ] **视频编辑**：添加滤镜、音乐、剪辑功能 - [ ] **通知系统**：推送点赞、评论、关注通知 - [ ] **直播功能**：实时直播推流和观看 欢迎提交 PR 贡献代码！ --- ## 🇨🇳 国内替代方案 由于 Firebase 在国内不可用，以下是各模块的替代方案： ### 后端替代方案 | Firebase 功能 | 国内替代方案 | 推荐程度 | |---------------|--------------|----------| | **Firestore** | [LeanCloud 数据存储](https://www.leancloud.cn/)、[腾讯云云开发数据库](https://tcb.cloud.tencent.com/) | ⭐⭐⭐⭐⭐ | | **Authentication** | [极光认证](https://www.jiguang.cn/verify)、[友盟+](https://www.umeng.com/)、自建 JWT | ⭐⭐⭐⭐ | | **Cloud Storage** | [七牛云 Kodo](https://www.qiniu.com/)、[腾讯云 COS](https://cloud.tencent.com/product/cos) | ⭐⭐⭐⭐⭐ | | **Cloud Functions** | [腾讯云 SCF](https://cloud.tencent.com/product/scf)、[LeanCloud 云引擎](https://www.leancloud.cn/) | ⭐⭐⭐⭐ | | **实时数据库** | [融云](https://www.rongcloud.cn/)、[环信](https://www.easemob.com/)、[Socket.io](https://socket.io/) | ⭐⭐⭐⭐ | ### 推荐全栈方案 | 方案 | 服务商 | 适用场景 | 成本 | |------|--------|----------|------| | **LeanCloud** | 美味书签 | 快速原型、中小型应用 | 有免费额度 | | **微信云开发** | 腾讯云 | 微信小程序+App 混合开发 | 免费额度高 | | **uniCloud** | DCloud | uni-app 跨平台开发 | 按量计费 | | **阿里云 Serverless** | 阿里云 | 企业级应用、高并发 | 按量计费 | ### 迁移成本评估 | 迁移模块 | 工作量 | 复杂度 | 说明 | |----------|--------|--------|------| | 数据库层 | 中等 | ⭐⭐⭐ | 需重写数据模型和查询逻辑，API 差异较大 | | 认证模块 | 较小 | ⭐⭐ | 各平台 SDK 类似，主要是接口适配 | | 文件存储 | 较小 | ⭐⭐ | API 差异不大，主要是 SDK 替换和配置 | | 云函数 | 较小 | ⭐⭐ | Node.js 函数逻辑基本通用，触发器配置不同 | | 实时通讯 | 中等 | ⭐⭐⭐ | Firestore 监听需替换为 WebSocket 或 SDK 方案 | --- ## 📚 参考资源 | 资源 | 链接 | 说明 | |------|------|------| | SimCoder 教程 | [GitHub](https://github.com/SimCoderYoutube/TiktokClone) | 原始教程项目 | | Android 模拟器配置 | [YouTube](https://www.youtube.com/watch?v=HrN1Fvjp2CE) | 环境搭建教程 | | iOS 模拟器配置 | [YouTube](https://www.youtube.com/watch?v=DloY4tyzKDA) | macOS 环境搭建 | | React Native 文档 | [官网](https://reactnative.dev/) | 官方文档 | | Expo 文档 | [官网](https://docs.expo.dev/) | 官方文档 | | Firebase 文档 | [官网](https://firebase.google.com/docs) | 官方文档 | ---
**Made with ❤️ using React Native & Firebase** 如果这个项目对你有帮助，请给个 ⭐ Star！