- 新增 mobile/ 项目:React Native + Expo - 5个核心页面:连接服务器、房间列表、创建房间、加入房间、设置 - Tab 导航 + Minecraft 风格深色 UI - 房间搜索/筛选(名称、房间号、房主、版本类型) - 15秒自动刷新房间列表 - 设置持久化(AsyncStorage) - EAS Build 配置(云端构建 iOS/Android) - 完整 README 含构建指南 - 更新顶层 README 为三项目全平台架构
3.2 KiB
3.2 KiB
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
安装依赖
cd mobile
npm install
开发模式
# 启动 Expo 开发服务器
npm start
# 在 iOS 模拟器中运行
npm run ios
# 在 Android 模拟器中运行
npm run android
也可以用 Expo Go 手机 App 扫描二维码直接在真机上运行。
编译发布
方式一:EAS Build(推荐,云端构建)
# 安装 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
方式二:本地构建
# 生成原生项目
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
联机流程
房主
- 在「连接」页连接中继服务器
- 在「创建」页创建房间,复制房间号
- 将房间号分享给好友
- 启动本地 Minecraft 服务器
玩家
- 在「连接」页连接同一个中继服务器
- 在「加入」页输入房间号
- 验证通过后获取服务器地址
- 在 Minecraft 中添加该服务器地址
- 开始联机!
技术栈
- React Native 0.73 + Expo 50
- TypeScript
- React Navigation - Tab 导航
- AsyncStorage - 本地持久化
- Axios - HTTP 请求
- EAS Build - 云端编译发布