APP 开发概览
MootingAPP 是基于 React Native 的跨平台移动应用，支持 Android、iOS 和 Web 平台。
项目信息
| 属性 | 值 |
|---|---|
| 项目路径 | app-dev/MootingAPP |
| 框架 | React Native 0.72.6 |
| Web 支持 | React Native Web + Vite |
| 平台 | Android / iOS / Web |
核心功能
🔐 用户认证
- 手机号/邮箱登录
- 验证码输入
- 自动登录
📱 设备连接
- 蓝牙设备扫描
- 设备配对与绑定
- 连接状态管理
🎙️ 实时转写
- 腾讯云 ASR 集成
- WebSocket 实时通信
- 字幕显示
📝 记录管理
- 转写记录列表
- 记录详情查看
- 复制、导出、删除
⚙️ 设置中心
- 转写设置
- 音频设置
- 显示设置
- 个人信息
项目结构
MootingAPP/
├── src/
│ ├── screens/ # 页面组件 (25+)
│ │ ├── FirstOpenScreen.jsx # 启动页
│ │ ├── LoginScreen.jsx # 登录页
│ │ ├── VerifyCodeScreen.jsx # 验证码页
│ │ ├── HomeScreen.jsx # 首页
│ │ ├── RecordingScreen.jsx # 录音页
│ │ ├── RecordListScreen.jsx # 记录列表
│ │ ├── RecordDetailScreen.jsx # 记录详情
│ │ ├── SettingsScreen.jsx # 设置页
│ │ ├── ProfileScreen.jsx # 个人中心
│ │ ├── AddDeviceScreen.jsx # 添加设备
│ │ ├── BluetoothScanScreen.jsx # 蓝牙扫描
│ │ └── ... # 更多页面
│ │
│ ├── components/ # 通用组件
│ │ ├── BottomNavBar.jsx # 底部导航
│ │ ├── HomeHeader.jsx # 首页头部
│ │ ├── RecordItem.jsx # 记录条目
│ │ ├── SearchBar.jsx # 搜索栏
│ │ ├── CustomSwitch.jsx # 开关组件
│ │ └── ...
│ │
│ ├── context/
│ │ └── AppContext.jsx # 全局状态
│ │
│ ├── services/
│ │ ├── api.js # HTTP 客户端
│ │ └── tencentCloud.js # 腾讯云 ASR
│ │
│ ├── constants/
│ │ ├── theme.js # 主题配置
│ │ ├── strings.js # 文本常量
│ │ └── assets.js # 资源引用
│ │
│ └── utils/
│ └── responsive.js # 响应式工具
│
├── assets/images/ # 图片资源
│ ├── bottom-nav-bar/ # 导航图标
│ ├── home/ # 首页图标
│ ├── setting/ # 设置图标
│ └── ...
│
├── android/ # Android 原生代码
├── ios/ # iOS 原生代码
├── web/ # Web 构建配置
│ └── vite.config.js
│
├── App.jsx # 根组件
├── index.js # 入口文件
└── package.json页面导航
┌─────────────────────────────────────────────────────────────┐
│ 应用页面流程 │
├─────────────────────────────────────────────────────────────┤
│ │
│ FirstOpen ──→ Login ──→ VerifyCode ──→ Home │
│ │ │
│ ┌─────────────────────┼──────────┐ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────────┐ ┌──────────┐ ┌────────┐ │
│ │Recording │ │ Settings │ │Profile │ │
│ └────┬─────┘ └────┬─────┘ └───┬────┘ │
│ │ │ │ │
│ ▼ │ │ │
│ ┌──────────┐ │ │ │
│ │RecordList│◄─────────────┘ │ │
│ └────┬─────┘ │ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────┐ ┌──────────┐ │
│ │RecordDetail │PersonalInfo │
│ └──────────┘ └──────────┘ │
│ │
│ 设备连接流程: │
│ AddDevice ──→ BluetoothAuth ──→ BluetoothScan ──→ Success │
│ │
└─────────────────────────────────────────────────────────────┘状态管理
使用 React Context 管理全局状态：
jsx
// AppContext.jsx
const AppContext = createContext();
export const AppProvider = ({ children }) => {
const [isConnected, setIsConnected] = useState(false);
const [isRecording, setIsRecording] = useState(false);
const [isPaused, setIsPaused] = useState(false);
const [deviceInfo, setDeviceInfo] = useState(null);
const connectDevice = (device) => {
setDeviceInfo(device);
setIsConnected(true);
};
const disconnectDevice = () => {
setDeviceInfo(null);
setIsConnected(false);
};
return (
<AppContext.Provider value={{
isConnected, setIsConnected,
isRecording, setIsRecording,
isPaused, setIsPaused,
deviceInfo, connectDevice, disconnectDevice
}}>
{children}
</AppContext.Provider>
);
};快速启动
bash
# 安装依赖
cd MootingAPP
npm install
# 启动 Metro
npm start
# Android
npm run android
# iOS (需 macOS)
npm run ios
# Web 预览
npm run webNPM Scripts
| 命令 | 说明 |
|---|---|
npm start | 启动 Metro bundler |
npm run android | 运行 Android |
npm run ios | 运行 iOS |
npm run web | 启动 Web 开发服务器 |
npm run web:build | 构建 Web 生产版本 |
npm run lint | 代码检查 |
npm test | 运行测试 |
主题配置
javascript
// constants/theme.js
export const Colors = {
primary: '#FF8636', // 主题橙色
background: '#FAF9F5', // 背景色
textMain: '#333333', // 主文本
textSecondary: '#666666', // 次要文本
textLight: '#999999', // 轻文本
border: 'rgba(229,229,229,0.9)',
tabActive: '#A8A098',
buttonGray: '#F2EFEC',
};
// 响应式缩放
export const scale = (size) =>
size * (SCREEN_WIDTH / 375);