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
安装依赖
# 安装项目依赖
npm install
# 安装模拟服务器依赖
cd mock-server
npm install
启动开发服务器
# 启动 Expo 开发服务器
npm start
# 或者直接启动特定平台
npm run ios # 启动 iOS 模拟器
npm run android # 启动 Android 模拟器
npm run web # 启动 Web 版本
启动后端服务器
# 在 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 保存登录状态
// 用户认证流程
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 上传到服务器
- 图片预览: 支持上传前预览和重新选择
- 文件管理: 服务器端管理上传的图片文件
// 图片上传逻辑
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 类型定义
// 网络请求配置
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. 性能优化
- 图片懒加载和优化
- 列表虚拟化（可扩展）
- 合理的组件渲染优化
部署说明
开发环境
- 确保 Node.js 环境已安装
- 安装项目依赖：
npm install - 启动后端服务：
cd mock-server && node server.js - 启动前端服务：
npm start
生产环境
- 使用 Expo Build Service 构建应用
- 配置生产环境 API 地址
- 设置适当的 CORS 策略
- 配置图片 CDN（如需要）
源码
总结
Rn-Blog 项目展示了如何使用现代 React Native 技术栈构建一个完整的社交博客应用。项目采用了最佳实践，包括类型安全、组件化设计、状态管理和错误处理。通过 Expo 平台，开发者可以快速构建和部署跨平台应用，同时保持代码的可维护性和扩展性。
该项目适合作为学习 React Native 开发的参考项目，也可以作为实际项目的基础进行进一步开发和完善。
