# rn-blog **Repository Path**: songyipantest/rn-blog ## Basic Information - **Project Name**: rn-blog - **Description**: 使用rn+expo创建的项目，使用express创建的mock数据 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-09-09 - **Last Updated**: 2025-09-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Rn-Blog - 基于 React Native 的社交博客应用 ## 项目概述 Rn-Blog 是一个基于 React Native 和 Expo 开发的跨平台社交博客应用，用户可以在其中发布文章、分享想法、上传图片，并与其他用户互动。该项目采用现代化的技术栈，提供了完整的用户认证、内容管理和图片上传功能。 ## 技术栈 ### 前端技术 - **React Native 0.79.6** - 跨平台移动应用开发框架 - **Expo ~53.0.22** - React Native 开发平台，提供丰富的 API 和工具 - **TypeScript ~5.8.3** - 类型安全的 JavaScript 超集 - **Expo Router ~5.1.5** - 基于文件系统的路由解决方案 - **React 19.0.0** - 用户界面库 ### UI 组件库 - **Ant Design React Native ^5.4.3** - 企业级 UI 组件库 - **@ant-design/icons-react-native ^2.3.2** - 图标组件库 - **@expo/vector-icons ^14.1.0** - Expo 图标库 ### 状态管理与数据 - **React Context API** - 全局状态管理 - **AsyncStorage 2.1.2** - 本地数据持久化 - **Axios ^1.11.0** - HTTP 客户端 ### 导航与路由 - **@react-navigation/native ^7.1.6** - 导航库 - **@react-navigation/bottom-tabs ^7.3.10** - 底部标签导航 - **react-native-safe-area-context 5.4.0** - 安全区域处理 ### 媒体处理 - **expo-image-picker ~16.1.4** - 图片选择器 - **expo-image ~2.4.0** - 优化的图片组件 - **react-native-webview 13.13.5** - WebView 组件 ### 后端技术 - **Node.js** - 服务器运行环境 - **Express.js** - Web 应用框架 - **JWT (jsonwebtoken)** - 身份认证 - **bcryptjs** - 密码加密 - **Multer** - 文件上传处理 - **CORS** - 跨域资源共享 ## 项目启动方式 ### 环境要求 - Node.js 16+ - npm 或 yarn - Expo CLI - iOS Simulator (macOS) 或 Android Emulator ### 安装依赖 ```bash # 安装项目依赖 npm install # 安装模拟服务器依赖 cd mock-server npm install ``` ### 启动开发服务器 ```bash # 启动 Expo 开发服务器 npm start # 或者直接启动特定平台 npm run ios # 启动 iOS 模拟器 npm run android # 启动 Android 模拟器 npm run web # 启动 Web 版本 ``` ### 启动后端服务器 ```bash # 在 mock-server 目录下启动后端服务 cd mock-server node server.js ``` 服务器将在 `http://localhost:3001` 启动，提供完整的 API 服务。 ## 项目目录结构 ``` rn-blog/ ├── app/ # 应用主目录 (Expo Router) │ ├── (auth)/ # 认证相关页面 │ │ ├── _layout.tsx # 认证布局 │ │ ├── sign_in.tsx # 登录页面 │ │ └── sign_up.tsx # 注册页面 │ ├── (tabs)/ # 主应用标签页 │ │ ├── _layout.tsx # 标签页布局 │ │ ├── add.tsx # 发布文章页面 │ │ ├── my.tsx # 个人中心页面 │ │ └── home/ # 首页相关 │ │ ├── _layout.tsx # 首页布局 │ │ ├── index.tsx # 首页主页面 │ │ ├── index_all.tsx # 全部文章页面 │ │ └── index_follow.tsx # 关注文章页面 │ ├── detail/ # 文章详情 │ │ └── [post_id].tsx # 动态路由文章详情 │ ├── components/ # 应用组件 │ │ └── AvatarExample.tsx # 头像示例组件 │ └── _layout.tsx # 根布局 ├── api/ # API 接口层 │ ├── post.ts # 文章相关 API │ ├── upload.ts # 文件上传 API │ └── user.ts # 用户相关 API ├── components/ # 通用组件 │ ├── ui/ # UI 组件 │ ├── ImagePicker.tsx # 图片选择器 │ ├── ThemedText.tsx # 主题文本组件 │ └── ThemedView.tsx # 主题视图组件 ├── context/ # React Context │ └── userContext.tsx # 用户状态管理 ├── hooks/ # 自定义 Hooks │ ├── useColorScheme.ts # 主题色 Hook │ └── useThemeColor.ts # 主题颜色 Hook ├── utils/ # 工具函数 │ ├── request/ # 网络请求工具 │ │ └── index.ts # Axios 配置 │ ├── avatarGenerator.ts # 头像生成器 │ └── index.ts # 工具函数入口 ├── types/ # TypeScript 类型定义 │ └── response.d.ts # API 响应类型 ├── constants/ # 常量定义 │ └── Colors.ts # 颜色主题 ├── mock-server/ # 模拟后端服务 │ ├── server.js # Express 服务器 │ ├── uploads/ # 上传文件存储 │ └── package.json # 后端依赖 ├── assets/ # 静态资源 │ ├── images/ # 图片资源 │ └── fonts/ # 字体文件 ├── app.json # Expo 配置 ├── package.json # 项目依赖配置 └── tsconfig.json # TypeScript 配置 ``` ## 核心功能与逻辑 ### 1. 用户认证系统 - **注册/登录**: 支持用户名密码注册和登录 - **JWT 认证**: 使用 JWT token 进行身份验证 - **状态管理**: 通过 React Context 管理全局用户状态 - **持久化存储**: 使用 AsyncStorage 保存登录状态 ```typescript // 用户认证流程 const handleLogin = async (values: any) => { const res = await login(values); setUser(res.data.data.user); AsyncStorage.setItem("token", res.data.data.token); router.back(); }; ``` ### 2. 文章管理系统 - **CRUD 操作**: 支持文章的创建、读取、更新、删除 - **分页加载**: 实现文章列表的分页功能 - **搜索功能**: 支持按标题和内容搜索文章 - **权限控制**: 只有作者可以编辑和删除自己的文章 ### 3. 图片上传功能 - **图片选择**: 使用 expo-image-picker 选择图片 - **文件上传**: 通过 FormData 上传到服务器 - **图片预览**: 支持上传前预览和重新选择 - **文件管理**: 服务器端管理上传的图片文件 ```typescript // 图片上传逻辑 const handleUploadImage = (uri: string) => { const formData = new FormData(); formData.append("image", { uri: uri, type: "image/png", name: "image", } as any); uploadImage(formData) .then((res) => { setImage(res.data.data.imageUrl); toastApi.success("上传成功"); }) .catch((err) => { toastApi.fail("上传失败"); }); }; ``` ### 4. 路由与导航 - **文件系统路由**: 使用 Expo Router 实现基于文件的路由 - **嵌套布局**: 支持认证页面和主应用的嵌套布局 - **动态路由**: 支持文章详情的动态路由 `[post_id].tsx` - **标签导航**: 底部标签栏导航，包含首页、发布、个人中心 ### 5. 网络请求封装 - **Axios 配置**: 统一的请求配置和拦截器 - **Token 自动添加**: 请求拦截器自动添加认证 token - **错误处理**: 统一的错误处理和响应格式化 - **类型安全**: 完整的 TypeScript 类型定义 ```typescript // 网络请求配置 const request = axios.create({ baseURL: "http://192.168.124.37:3001/api", timeout: 10000, }); request.interceptors.request.use(async (config) => { const token = await AsyncStorage.getItem("token"); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); ``` ### 6. 主题系统 - **深色/浅色主题**: 支持系统主题自动切换 - **主题色管理**: 统一的颜色主题管理 - **响应式设计**: 适配不同屏幕尺寸 ## 后端 API 设计 ### 认证相关 - `POST /api/auth/register` - 用户注册 - `POST /api/auth/login` - 用户登录 - `GET /api/auth/me` - 获取当前用户信息 - `GET /api/users/:id` - 获取指定用户信息 ### 文章相关 - `GET /api/posts` - 获取文章列表（支持分页和用户筛选） - `GET /api/posts/:id` - 获取单篇文章详情 - `POST /api/posts` - 创建文章（需要认证） - `PUT /api/posts/:id` - 更新文章（需要认证） - `DELETE /api/posts/:id` - 删除文章（需要认证） - `GET /api/posts/search` - 搜索文章（支持分页） ### 文件上传 - `POST /api/upload/image` - 上传图片（需要认证） - `DELETE /api/upload/image/:filename` - 删除图片（需要认证） - `GET /uploads/:filename` - 访问上传的图片 ## 开发特色 ### 1. 类型安全 - 完整的 TypeScript 类型定义 - API 响应类型约束 - 组件 Props 类型检查 ### 2. 组件化设计 - 高度可复用的 UI 组件 - 清晰的组件职责分离 - 统一的组件设计规范 ### 3. 状态管理 - 使用 React Context 进行全局状态管理 - 本地状态与全局状态的合理分离 - 持久化存储集成 ### 4. 错误处理 - 统一的错误处理机制 - 用户友好的错误提示 - 网络请求错误拦截 ### 5. 性能优化 - 图片懒加载和优化 - 列表虚拟化（可扩展） - 合理的组件渲染优化 ## 部署说明 ### 开发环境 1. 确保 Node.js 环境已安装 2. 安装项目依赖：`npm install` 3. 启动后端服务：`cd mock-server && node server.js` 4. 启动前端服务：`npm start` ### 生产环境 - 使用 Expo Build Service 构建应用 - 配置生产环境 API 地址 - 设置适当的 CORS 策略 - 配置图片 CDN（如需要） ## 总结 Rn-Blog 项目展示了如何使用现代 React Native 技术栈构建一个完整的社交博客应用。项目采用了最佳实践，包括类型安全、组件化设计、状态管理和错误处理。通过 Expo 平台，开发者可以快速构建和部署跨平台应用，同时保持代码的可维护性和扩展性。 该项目适合作为学习 React Native 开发的参考项目，也可以作为实际项目的基础进行进一步开发和完善。