# cirno-chat-mobile-frontend

**Repository Path**: flanchanowo/cirno-chat-mobile-frontend

## Basic Information

- **Project Name**: cirno-chat-mobile-frontend
- **Description**: 基于react native + expo的聊天APP
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 2
- **Created**: 2025-04-13
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: ReactNative, expo, apk

## README

# TeleChat

<div align="center">
  <img src="./assets/icon.png" alt="Cirno Chat Logo" width="120" />
  <h3>移动端社交通讯应用</h3>
<span style="color:red;">目前项目正在开发中，仅供学习参考，不建议直接用于到生产环境中</span>
</div>

<p align="center">
  <img src="https://img.shields.io/badge/React%20Native-0.76.9-61dafb" alt="React Native" />
  <img src="https://img.shields.io/badge/Expo-52.0.46-000020" alt="Expo" />
  <img src="https://img.shields.io/badge/TypeScript-5.7.3-3178c6" alt="TypeScript" />
  <img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License" />
  <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome" />
</p>

## 📱 项目简介

Cirno Chat 是一款基于 React Native 和 Expo 开发的移动端即时通讯应用。它提供了丰富的聊天功能，包括文本、图片、视频消息，以及音视频通话等功能。

- 后端项目仓库: [https://gitee.com/flanchanowo/cirno-chat-backend](https://gitee.com/flanchanowo/cirno-chat-backend)

## 🚀 技术栈

<p align="center">
  <img src="https://img.shields.io/badge/React%20Native-0.76.9-61dafb" alt="React Native" />&nbsp;
  <img src="https://img.shields.io/badge/Expo-52.0.46-000020" alt="Expo" />&nbsp;
  <img src="https://img.shields.io/badge/Zustand-5.0.3-brown" alt="Zustand" />&nbsp;
  <img src="https://img.shields.io/badge/Axios-1.8.4-5a29e4" alt="Axios" />&nbsp;
  <img src="https://img.shields.io/badge/TypeScript-5.7.3-3178c6" alt="TypeScript" />&nbsp;
  <img src="https://img.shields.io/badge/WebRTC-124.0.5-orange" alt="WebRTC" />&nbsp;
  <img src="https://img.shields.io/badge/STOMP-7.1.1-lightgrey" alt="STOMP" />&nbsp;
  <img src="https://img.shields.io/badge/SQLite-15.1.4-003b57" alt="SQLite" />
</p>

## 🔧 环境配置

### 前提条件

- Node.js (推荐 v18+)
- Expo CLI
- Android Studio (安卓开发) / Xcode (iOS 开发)

### 安装依赖

```bash
npm install
```

### 安装 eas-cli

本项目使用eas build服务进行托管，详细参考 https://expo.nodejs.cn/build/introduction/

```bash
npm install -g eas-cli
````

### 初始化eas配置文件

如果你没有expo账号，建议去注册一个账号 https://expo.dev/signup

```bash
eas login
eas build:configure
npx eas build:configure
```

### 构建Expo开发构建安卓APP (如果你想基于本项目二次开发)

```bash
eas build --platform android --profile development
```

### 构建Expo生产环境安卓APP

```bash
eas build --platform android --profile production
```

## 开发

### 开发环境启动

```bash
npm run start
```

## 项目代码规范

### 1. 组件命名

组件名必须使用大驼峰（PascalCase）命名，如：UserProfile、LoginForm。
只有当组件有自己的 `index.style.ts` 文件时，才可为该组件创建文件夹，文件夹名同样使用大驼峰命名。

### 2. 组件结构:

单文件组件：`UserProfile.tsx` \
多文件组件（需要为组件定义样式）：\
UserProfile/ \
├─ `index.tsx` \
└─ `index.style.ts`

### 3. 路由路径

路由路径统一使用短横线（kebab-case），如：`/user-profile`、`/login-form`。

### 4. 类型定义

组件用到的类型必须在组件内部定义或引入，禁止在组件外部深层传参。

### 5. 状态管理

组件间共享状态请使用状态管理库 或 React Context，不要通过多层 props 传递。

### 6. 其它规范

文件名、文件夹名、变量名、函数名均需语义化，禁止拼音、缩写。
禁止在组件外部直接操作 DOM。
禁止在组件外部直接引入样式文件，样式仅在组件内部引用。
所有异步操作需加错误处理。
禁止魔法数字，需定义常量。
必须写注释，特别是复杂逻辑。
禁止使用 `any`，类型必须明确。
组件必须有默认导出。
代码需通过 ESLint 检查，格式化使用 Prettier。

<hr>

## 目录结构

```
app/                 # 视图目录
assets/              # 静态资源目录
   src/
    ├─ background-task/           # 后台任务目录
    ├─ components/        # 组件目录
    ├─ config/             # 配置目录
    ├─ constants/          # 常量目录
    ├─ styles/            # 全局样式目录
    ├─ context/          # Context 目录
    ├─ hooks/             # 自定义 Hook 目录
    ├─ notification/      # 通知服务目录
    └─ services/           # 服务目录
        ├─ api/               # API 请求目录
        ├─ sqlite/          # SQLite 数据库操控目录    
        └─ store/             # 状态管理目录
    ├─ types/             # 类型定义目录
    └─ utils/            # 工具函数目录
app.config.js        # Expo 应用配置文件
App.tsx            # 应用入口文件
eas.json            # EAS 构建配置文件
index.tsx           # 应用入口TS文件
package.json        # 项目依赖配置文件
tsconfig.json      # TypeScript 配置文件
```