任务管理应用

基于Expo Router和React Native构建的本地化任务管理应用,支持离线操作和原生UI组件。

  • by keitanamazue
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 keitanamazue/expo-mcp

使用说明

世博会mcp

Expo Router + React Native 中所述的工具,调整墙的布局和几何形状ToDo 恢复程序。SwiftUI/Native Tabs 等等Expo SDK 54 中描述的场景,使用以下步骤创建明细表,以便在概念设计中分析体量的体积。

主要特征

  • 脱机支持:任务是内存+AsyncStorage 中所述修改相应参数的值
  • 本地选项卡: expo-router/unstable-native-tabs 利用期间Liquid Glass 风标签栏
  • SwiftUI 组件: @expo/ui 实验性部署UI 部分绘图
  • 任务操作:提供追加、编辑、完成切换、删除、完成任务的合计

安装,安装

npm install

Development Build (必须)

Native Tabs 和 @expo/ui 啊Expo Go 中所述修改相应参数的值。按照以下步骤 prebuild →开发构建 来修改标记元素的显示属性。

# ネイティブプロジェクト生成 (初回のみ、設定変更時も再実行)
npx expo prebuild

# iOS シミュレータ (例: iPhone 17 Pro)
npx expo run:ios --device "iPhone 17 Pro"

# Android エミュレータ
npx expo run:android

iOS 开发构建运行时Xcode 中描述的场景,使用以下步骤创建明细表,以便在概念设计中分析体量的体积。

在那之后Metro 可以启动包并进行热重载。

npx expo start

项目配置

  • app/ … Expo Router 路线。(tabs) 以下是标签配置(index.tsx / explore.tsx / search.tsx)
  • components/ …任务UI 啊SwiftUI 桥
  • context/ … TasksProvider (任务状态、持久化)
  • storage/ … AsyncStorage 包装
  • types/ …任务模型定义

任务工作流

  1. TasksProvider 启动时AsyncStorage 从同步
  2. TaskComposer 在中添加任务(必需:标题)
  3. TaskItem 完成、编辑、删除操作
  4. Summary 在选项卡中显示统计完成列表

开发说明

  • SwiftUI(@expo/ui)表示β 因为是版,所以重要操作是RN 组件实施
  • Native Tabs 的,之 role="search" 的iOS 的搜索图标位置调整
  • 更改后 npm run lint 静态检查

链接

  • Expo路由器本机选项卡:https://docs.expo.dev/router/advanced/native-tabs/
  • Expo UI(SwiftUI):https://docs.expo.dev/guides/expo-ui-swift-ui/
  • 异步存储:https://react-native-async-storage.github.io/async-storage/