Update

2026-02-21 09:14:44 +08:00 · 2025-07-02 09:09:35 +08:00
parent 3b79d06b7d
commit 05ef835d5d
86 changed files with 2440 additions and 8770 deletions
--- a/README.md
+++ b/README.md
@@ -1,48 +1,126 @@
-# react-native-media-console TV demo 👋
+# OrionTV 📺

-![Apple TV screen shot](https://github.com/douglowder/examples/assets/6577821/a881466f-a7a0-4c66-b1fc-33235c466997)
-![Android TV screen shot](https://github.com/douglowder/examples/assets/6577821/815c8e01-8275-4cc1-bd57-b9c8bce1fb02)
+一个基于 React Native TVOS 和 Expo 构建的跨平台电视应用，旨在提供流畅的视频观看体验。项目包含一个用于数据服务的 Express 后端。

-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+## ✨ 功能特性

-This project uses
+- **跨平台支持**: 同时支持 Apple TV 和 Android TV。
+- **现代化前端**: 使用 Expo、React Native TVOS 和 TypeScript 构建，性能卓越。
+- **Expo Router**: 基于文件系统的路由，使导航逻辑清晰简单。
+- **后端服务**: 配套 Express 后端，用于处理数据获取、搜索和详情展示。
+- **TV 优化的 UI**: 专为电视遥控器交互设计的用户界面。

- the [React Native TV fork](https://github.com/react-native-tvos/react-native-tvos), which supports both phone (Android and iOS) and TV (Android TV and Apple TV) targets
- the [React Native TV config plugin](https://github.com/react-native-tvos/config-tv/tree/main/packages/config-tv) to allow Expo prebuild to modify the project's native files for TV builds
- [react-native-video](https://github.com/TheWidlarzGroup/react-native-video) package to play videos
- [react-native-media-console](https://github.com/LunatiqueCoder/react-native-media-console) for video controls
+## 🛠️ 技术栈

-## 🚀 How to use
+- **前端**:
+  - [React Native TVOS](https://github.com/react-native-tvos/react-native-tvos)
+  - [Expo](https://expo.dev/) (~51.0)
+  - [Expo Router](https://docs.expo.dev/router/introduction/)
+  - [Expo AV](https://docs.expo.dev/versions/latest/sdk/av/)
+  - TypeScript
+- **后端**:
+  - [Node.js](https://nodejs.org/)
+  - [Express](https://expressjs.com/)
+  - [TypeScript](https://www.typescriptlang.org/)

- `cd` into the project
+## 📂 项目结构

-```sh
-yarn
-yarn prebuild # Executes Expo prebuild with TV modifications
-yarn ios # Build and run for Apple TV
-yarn android # Build for Android TV
+本项目采用类似 monorepo 的结构：
+
+```
+.
+├── app/              # Expo Router 路由和页面
+├── assets/           # 静态资源 (字体, 图片, TV 图标)
+├── backend/          # 后端 Express 应用
+├── components/       # React 组件
+├── constants/        # 应用常量 (颜色, 样式)
+├── hooks/            # 自定义 Hooks
+├── services/         # 服务层 (API, 存储)
+├── package.json      # 前端依赖和脚本
+└── ...
 ```

-## Development
+## 🚀 快速开始

-You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+### 环境准备

-This project includes a [demo](./components/EventHandlingDemo.tsx) showing how to use React Native TV APIs to highlight controls as the user navigates the screen with the remote control.
+请确保您的开发环境中已安装以下软件：

-## TV specific file extensions
+- [Node.js](https://nodejs.org/) (LTS 版本)
+- [Yarn](https://yarnpkg.com/)
+- [Expo CLI](https://docs.expo.dev/get-started/installation/)
+- [Xcode](https://developer.apple.com/xcode/) (用于 Apple TV 开发)
+- [Android Studio](https://developer.android.com/studio) (用于 Android TV 开发)

-This project includes an [example Metro configuration](./metro.config.js) that allows Metro to resolve application source files with TV-specific code, indicated by specific file extensions (`*.ios.tv.tsx`, `*.android.tv.tsx`, `*.tv.tsx`). The [ExternalLink](./components/ExternalLink.tsx) component makes use of this by having a [separate TV source file](./components/ExternalLink.tv.tsx) that avoids importing packages that don't exist on Apple TV.
+### 1. 后端服务

-## Learn more
+首先，启动后端服务：

-To learn more about developing your project with Expo, look at the following resources:
+```sh
+# 进入后端目录
+cd backend

- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
- [Learn Expo tutorial](https://docs.expo.dev/learn): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+# 安装依赖
+yarn

-## Join the community
+# 启动开发服务器
+yarn dev
+```

-Join our community of developers creating universal apps.
+后端服务将运行在 `http://localhost:3001`。

- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+### 2. 前端应用
+
+接下来，在项目根目录运行前端应用：
+
+```sh
+# (如果还在 backend 目录) 返回根目录
+cd ..
+
+# 安装前端依赖
+yarn
+
+# [首次运行或依赖更新后] 生成原生项目文件
+# 这会根据 app.json 中的配置修改原生代码以支持 TV
+yarn prebuild-tv
+
+# 运行在 Apple TV 模拟器或真机上
+yarn ios-tv
+
+# 运行在 Android TV 模拟器或真机上
+yarn android-tv
+```
+
+## 部署
+
+### 后端部署 (Vercel)
+
+后端服务已配置为可以轻松部署到 [Vercel](https://vercel.com/)。
+
+1.  **安装 Vercel CLI**
+
+    如果您尚未安装，请全局安装 Vercel CLI：
+
+    ```sh
+    npm install -g vercel
+    ```
+
+2.  **部署**
+
+    进入 `backend` 目录并运行 `vercel` 命令：
+
+    ```sh
+    cd backend
+    vercel
+    ```
+
+    按照 Vercel CLI 的提示完成登录和部署过程。`vercel.json` 文件已配置好所有必要的构建和路由设置。
+
+## 📜 主要脚本
+
+- `yarn start`: 在手机模式下启动 Metro Bundler。
+- `yarn start-tv`: 在 TV 模式下启动 Metro Bundler。
+- `yarn ios-tv`: 在 Apple TV 上构建并运行应用。
+- `yarn android-tv`: 在 Android TV 上构建并运行应用。
+- `yarn prebuild-tv`: 为 TV 构建生成原生项目文件。
+- `yarn lint`: 检查代码风格。