Skip to content

huanglvjing/make-a-note

Repository files navigation

Make a note!

一款基于 Expo + React Native 的多功能移动应用,集笔记、任务、片段、记账、画布与设置于一体,采用赛博朋克风格 UI,支持富文本、图片、录音、附件与子页面等丰富内容块。

笔记首页 笔记内容页 任务页面 片段页面 记账页面 画布页面 设置页面


功能概览

模块 说明
笔记 层级笔记、富文本、图片/录音/附件块、子页面、收藏与置顶、搜索
任务 待办列表、优先级、截止日期、子任务、提醒通知
片段 快速记录灵感与短内容
记账 账户管理、收支记录、统计图表、储蓄目标
画布 自由画布编辑与列表管理
设置 关于、画布管理、数据备份/恢复、捐赠等

环境要求

  • Node.js >= 18.0.0
  • Bun >= 1.0.0(推荐)或 npm / yarn
  • Expo Go(手机端扫码预览,可选)
  • Android Studio / Xcode(仅在做真机/模拟器构建时需要)

运行步骤

1. 克隆仓库

git clone https://github.com/huanglvjing/make-a-note
cd TodoApp

2. 安装依赖

# 推荐使用 Bun
bun install

# 或使用 npm
npm install

3. 启动开发服务器

# 使用 Bun
bun start

#
npm start

4. 在设备上预览

  • Expo Go:手机安装 Expo Go,扫描终端中的二维码。
  • 同一 WiFi:确保手机与电脑在同一网络;若无法连接,可尝试隧道模式:
    bun start -- --tunnel
  • 模拟器:在终端按 a(Android)或 i(iOS,需 macOS)。

5. 清除缓存(遇到异常时)

bun start -- --clear
#
npm start -- --clear

页面与功能说明

笔记

  • 笔记列表:层级展示、展开/收起子页面、搜索、收藏与置顶、玻璃拟态卡片。
  • 笔记详情/编辑:大标题、块编辑器(文本、富文本、图片、录音、附件、子页面)、置顶/收藏/删除、自动保存、创建时间/更新时间。
  • 富文本:粗体、斜体、删除线、下划线、标题、列表、代码块、引用、对齐等。
  • 多媒体块:拍照/相册选图、录音与播放、任意类型附件、子页面块与跳转。

任务

  • 任务列表与详情、新建/编辑任务、优先级、截止日期、子任务、提醒通知。

片段

  • 快速记录短内容与灵感,列表展示与管理。

记账

  • 账户管理、收支记录、统计图表、储蓄目标与详情。

画布

  • 画布列表、画布编辑与保存(在设置模块中可进入画布管理)。

设置

  • 关于应用、画布列表与编辑、数据备份与恢复、捐赠等入口。

技术栈

类别 技术
框架 React Native 0.81.5、Expo SDK 54、React 19.1.0
语言 TypeScript 5.9.x
状态与存储 Zustand、AsyncStorage
导航 React Navigation(Bottom Tabs + Stack)
UI/样式 NativeWind (Tailwind)、Expo Linear Gradient、Expo Vector Icons
其他 date-fns、uuid、expo-av、expo-image-picker、expo-document-picker、expo-notifications 等

项目结构(简要)

TodoApp/
├── src/
│   ├── modules/          # 功能模块
│   │   ├── notes/        # 笔记
│   │   ├── tasks/        # 任务
│   │   ├── fragments/    # 片段
│   │   ├── finance/      # 记账
│   │   └── settings/     # 设置(含画布)
│   ├── components/       # 全局通用组件
│   ├── navigation/       # 导航配置
│   ├── services/         # 存储、通知、媒体等
│   ├── hooks/            # 自定义 Hooks
│   ├── utils/            # 工具函数
│   ├── constants/        # 主题、常量、Storage Keys
│   └── screens/          # 启动页等
├── assets/               # 图标、启动图等
├── docs/                 # 文档与截图
├── App.tsx               # 应用入口
└── package.json

更多细节见 docs/PROJECT_STRUCTURE.mddocs/SETUP.mddocs/RICH_FEATURES_GUIDE.md


权限说明(移动端)

  • 相机:笔记内拍照
  • 相册:选择图片
  • 麦克风:录音块
  • 存储/文件:附件、备份与恢复
  • 通知:任务提醒

在真机或模拟器上首次使用相关功能时,按系统提示授权即可。


文档


许可证

MIT License

About

expo react-native typescript notes-app todo-app finance-tracker mobile-app

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors