feat: 新增移动客户端(iOS + Android)

- 新增 mobile/ 项目:React Native + Expo
- 5个核心页面:连接服务器、房间列表、创建房间、加入房间、设置
- Tab 导航 + Minecraft 风格深色 UI
- 房间搜索/筛选(名称、房间号、房主、版本类型)
- 15秒自动刷新房间列表
- 设置持久化(AsyncStorage)
- EAS Build 配置(云端构建 iOS/Android)
- 完整 README 含构建指南
- 更新顶层 README 为三项目全平台架构
This commit is contained in:
FunMC
2026-02-23 08:08:46 +08:00
parent e73c8e536e
commit 09470c0465
17 changed files with 1309 additions and 26 deletions

131
mobile/README.md Normal file
View File

@@ -0,0 +1,131 @@
# FunConnect Mobile
Minecraft 联机移动客户端,基于 **React Native + Expo** 构建,支持 **iOS****Android**
## 功能
- **连接服务器** - 输入中继服务器地址连接
- **浏览房间** - 实时查看在线联机房间(自动刷新)
- **搜索筛选** - 按名称、房间号、房主搜索,按版本类型筛选
- **创建房间** - 创建联机房间并分享房间号
- **加入房间** - 输入房间号加入,支持密码验证
- **设置持久化** - 记住服务器地址、玩家名
- **深色主题** - Minecraft 风格暗色 UI
## 快速开始
### 前置要求
- Node.js 18+
- Expo CLI: `npm install -g expo-cli`
- iOS: Xcode 15+(仅 macOS
- Android: Android Studio + SDK
### 安装依赖
```bash
cd mobile
npm install
```
### 开发模式
```bash
# 启动 Expo 开发服务器
npm start
# 在 iOS 模拟器中运行
npm run ios
# 在 Android 模拟器中运行
npm run android
```
> 也可以用 **Expo Go** 手机 App 扫描二维码直接在真机上运行。
## 编译发布
### 方式一EAS Build推荐云端构建
```bash
# 安装 EAS CLI
npm install -g eas-cli
# 登录 Expo 账号
eas login
# 构建 Android APK预览版
eas build --platform android --profile preview
# 构建 Android AAB生产版用于上架 Google Play
eas build --platform android --profile production
# 构建 iOS需要 Apple Developer 账号)
eas build --platform ios --profile production
# 同时构建两个平台
eas build --platform all --profile production
```
### 方式二:本地构建
```bash
# 生成原生项目
npx expo prebuild
# Android
cd android && ./gradlew assembleRelease
# 输出: android/app/build/outputs/apk/release/app-release.apk
# iOS需要 macOS + Xcode
cd ios && xcodebuild -workspace FunConnect.xcworkspace -scheme FunConnect archive
```
## 项目结构
```
mobile/
├── App.tsx # 入口 + Tab 导航
├── index.js # 注册根组件
├── src/
│ ├── screens/
│ │ ├── ConnectScreen.tsx # 连接服务器
│ │ ├── RoomsScreen.tsx # 房间列表
│ │ ├── CreateScreen.tsx # 创建房间
│ │ ├── JoinScreen.tsx # 加入房间
│ │ └── SettingsScreen.tsx # 设置
│ ├── lib/
│ │ ├── api.ts # API 客户端 + 存储
│ │ └── theme.ts # 主题色彩
│ └── components/ # 共享组件
├── app.json # Expo 配置
├── eas.json # EAS Build 配置
├── package.json
└── tsconfig.json
```
## 联机流程
### 房主
1. 在「连接」页连接中继服务器
2. 在「创建」页创建房间,复制房间号
3. 将房间号分享给好友
4. 启动本地 Minecraft 服务器
### 玩家
1. 在「连接」页连接同一个中继服务器
2. 在「加入」页输入房间号
3. 验证通过后获取服务器地址
4. 在 Minecraft 中添加该服务器地址
5. 开始联机!
## 技术栈
- **React Native 0.73** + **Expo 50**
- **TypeScript**
- **React Navigation** - Tab 导航
- **AsyncStorage** - 本地持久化
- **Axios** - HTTP 请求
- **EAS Build** - 云端编译发布