# rn-rednote **Repository Path**: web_74/rn-rednote ## Basic Information - **Project Name**: rn-rednote - **Description**: 小红书 仿写 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-04-30 - **Last Updated**: 2026-04-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 📕 Redbook App

Redbook Logo

仿小红书风格的 React Native 社交购物应用

Expo SDK 54 React Native TypeScript

--- ## 📱 界面预览
| 首页 | 商城 | 消息 | 我的 | |:---:|:---:|:---:|:---:| | ![设计稿1](pic/%E8%AE%BE%E8%AE%A1%E7%A8%BF1.png) | ![设计稿2](pic/%E8%AE%BE%E8%AE%A1%E7%A8%BF2.png) | ![设计稿3](pic/%E8%AE%BE%E8%AE%A1%E7%A8%BF3.png) | ![设计稿4](pic/%E8%AE%BE%E8%AE%A1%E7%A8%BF4.png) | | 文章详情 | 登录页 | |:---:|:---:| | ![设计稿5](pic/%E8%AE%BE%E8%AE%A1%E7%A8%BF5.png) | ![设计稿6](pic/%E8%AE%BE%E8%AE%A1%E7%A8%BF6.png) |
--- ## 🛠 技术栈 | 类别 | 技术 | 版本 | |:---:|:---|:---:| | **框架** | Expo SDK | 54.0.0 | | **核心** | React Native | 0.79.0 | | **语言** | TypeScript | 5.8.x | | **路由** | expo-router | ~5.0.0 | | **状态管理** | MobX | ^6.12.3 | | **网络请求** | Axios | ^1.6.8 | | **UI 库** | React Native 原生组件 | - | --- ## � 第三方组件库 ### 🚀 Expo 生态 | 库名 | 用途 | 版本 | |:---|:---|:---:| | [expo](https://docs.expo.dev) | Expo 核心框架 | ~54.0.0 | | [expo-router](https://docs.expo.dev/router/introduction) | 文件系统路由 | ~5.0.0 | | [expo-status-bar](https://docs.expo.dev/versions/latest/sdk/status-bar) | 状态栏控制 | ~2.2.0 | | [expo-linking](https://docs.expo.dev/guides/linking) | 深度链接处理 | ^55.0.14 | ### ⚛️ React Native 核心库 | 库名 | 用途 | 版本 | |:---|:---|:---:| | [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) | 安全区域处理 | 5.4.0 | | [react-native-screens](https://github.com/software-mansion/react-native-screens) | 原生屏幕优化 | 4.10.0 | | [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) | 手势处理 | ~2.24.0 | | [@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage) | 本地存储 | 2.1.0 | ### 🛠 功能库 | 库名 | 用途 | 版本 | |:---|:---|:---:| | [mobx](https://mobx.js.org) + [mobx-react](https://github.com/mobxjs/mobx-react) | 状态管理 | ^6.12.3 / ^9.1.1 | | [axios](https://axios-http.com) | HTTP 请求 | ^1.6.8 | | [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) | 图片选择 | ^7.1.2 | | ~~react-native-update~~ | ~~热更新~~(已注释) | - | ### 🧩 自定义组件 | 组件 | 路径 | 功能描述 | |:---|:---|:---| | **FlowList** | `components/flowlist/` | 瀑布流列表布局 | | **Heart** | `components/Heart/` | 点赞动画组件 | | **ResizeImage** | `components/ResizeImage/` | 自适应宽高图片 | | **slidePager** | `components/slidePager/` | 图片轮播组件 | | **Empty** | `components/Empty/` | 空状态占位组件 | | **Toast** | `components/widget/` | 轻提示弹窗 | | **Loading** | `components/widget/` | 加载中遮罩 | --- ## �📂 项目结构 ``` redbook/ ├── 📁 app/ # expo-router 路由目录 │ ├── _layout.tsx # 根布局 │ ├── index.tsx # 欢迎页 (/) │ ├── login.tsx # 登录页 (/login) │ ├── search.tsx # 搜索页 (/search) │ ├── article/ │ │ └── [id].tsx # 文章详情 (/article/:id) │ └── (tabs)/ # Tab 路由组 │ ├── _layout.tsx # Tab 布局 │ ├── index.tsx # 首页 (Home) │ ├── shop.tsx # 商城 (Shop) │ ├── message.tsx # 消息 (Message) │ ├── mine.tsx # 我的 (Mine) │ └── publish.tsx # 发布按钮 │ ├── 📁 src/ │ ├── apis/ # API 接口定义 │ ├── assets/ # 静态资源（图片、图标） │ ├── components/ # 公共组件 │ │ ├── Empty/ # 空状态组件 │ │ ├── Heart/ # 点赞组件 │ │ ├── ResizeImage/ # 自适应图片组件 │ │ ├── slidePager/ # 轮播图组件 │ │ ├── flowlist/ # 瀑布流列表 │ │ └── widget/ # 小部件(Toast/Loading) │ ├── pages/ # 页面组件 │ ├── stores/ # MobX 状态管理 │ └── utils/ # 工具函数 │ ├── 📁 pic/ # 设计稿图片 ├── package.json ├── tsconfig.json ├── metro.config.js └── app.json ``` --- ## ✨ 功能特性 ### 🏠 首页 | 功能 | 描述 | |:---|:---| | 瀑布流布局 | 双列瀑布流展示文章列表 | | 下拉刷新 | 支持下拉刷新获取最新内容 | | 上拉加载 | 无限滚动加载更多内容 | | 分类筛选 | 按分类筛选文章内容 | ### 🛒 商城 | 功能 | 描述 | |:---|:---| | 分类展示 | 商品分类图标展示 | | 商品列表 | 商品瀑布流列表 | | 商品搜索 | 支持关键词搜索商品 | ### 💬 消息 | 功能 | 描述 | |:---|:---| | 消息列表 | 展示互动消息列表 | | 未读提示 | 未读消息小红点提示 | | 消息分类 | 赞、评论、关注等分类 | ### 👤 我的 | 功能 | 描述 | |:---|:---| | 用户信息 | 展示用户资料 | | 我的笔记 | 用户发布的笔记列表 | | 收藏列表 | 收藏的文章列表 | | 订单管理 | 订单和购物车入口 | | 设置 | 个人设置页面 | ### 📝 文章详情 | 功能 | 描述 | |:---|:---| | 内容展示 | 图文混排展示 | | 图片轮播 | 文章图片滑动浏览 | | 互动功能 | 点赞、评论、收藏 | | 评论列表 | 展示评论及回复 | --- ## 🚀 快速开始 ### 环境要求 | 依赖 | 版本要求 | |:---|:---:| | Node.js | >= 18 | | npm / yarn | 最新版 | | Expo Go App | iOS / Android | ### 安装依赖 ```bash npm install # 或 yarn install ``` ### 启动开发服务器 ```bash # 启动 Metro Bundler npm start # 启动 Android npm run android # 启动 iOS npm run ios # 启动 Web npm run web ``` ### 设备预览 | 方式 | 操作 | |:---|:---| | **手机扫码** | 下载 Expo Go App，扫描终端二维码 | | **Android 模拟器** | 按 `a` 键 | | **iOS 模拟器** | 按 `i` 键 | | **Web 浏览器** | 按 `w` 键 | --- ## 🔌 API 接口 > 后端服务地址：`http://127.0.0.1:7001` | 模块 | 接口 | 描述 | |:---:|:---|:---| | **用户** | `POST /user/login` | 用户登录 | | **首页** | `GET /home/homeList` | 获取首页列表 | | **文章** | `GET /article/articleDetail` | 文章详情 | | **消息** | `GET /message/messageList` | 消息列表 | | **消息** | `GET /message/unread` | 未读消息 | | **商城** | `GET /goods/goodsList` | 商品列表 | | **商城** | `GET /goods/top10Category` | 商品分类 | | **我的** | `GET /mine/noteList` | 我的笔记 | | **我的** | `GET /mine/collectionList` | 收藏列表 | | **我的** | `GET /mine/accountInfo` | 账户信息 | > 📄 详见 [redbook接口-readme.md](./redbook接口-readme.md) --- ## 📋 开发指南 ### 路由导航 项目使用 **expo-router** 进行文件系统路由： ```typescript // 跳转到页面 import { useRouter } from 'expo-router'; const router = useRouter(); // 跳转到文章详情 router.push(`/article/${id}`); // 替换当前页面 router.replace('/login'); // 返回上一页 router.back(); ``` ### 状态管理 使用 **MobX** 进行状态管理： ```typescript import { observer } from 'mobx-react'; const MyComponent = observer(() => { // 组件会自动响应 store 变化 return {Store.data}; }); ``` ### 代码规范 | 规范 | 说明 | |:---|:---| | 语言 | TypeScript 严格模式 | | 组件 | 函数式组件 + Hooks | | 状态 | MobX 统一管理 | | 资源 | 图片统一放 `src/assets` | --- ## ⚠️ 常见问题 | 问题 | 解决方案 | |:---|:---| | FlatList 滑动异常 | 重启项目解决 | | react-native-update 错误 | 已注释，Expo 暂不支持 | | 依赖版本警告 | 可运行 `npx expo install --fix` 修复 | --- ## 📚 相关资源 | 资源 | 链接 | |:---|:---| | React Native | https://reactnative.dev | | Expo 文档 | https://docs.expo.dev | | expo-router | https://docs.expo.dev/router/introduction | | MobX | https://mobx.js.org | --- ## 📄 开源协议 [MIT](LICENSE) © Redbook App ---

如果这个项目对你有帮助，欢迎 ⭐ Star！