react-native-app

# React Native 应用模板 ## 技术栈 | 组件 | 技术 | |-----------|------------| | 框架 | React Native + Expo | | 语言 | TypeScript | | 导航 | Expo Router | | 状态管理 | Zustand + React Query | | 样式 | NativeWind | | 测试 | Jest + RNTL | --- ## 目录结构 project-name/ ├── app/ # Expo Router (基于文件) │ ├── _layout.tsx # 根布局 │ ├── index.tsx # 首页 │ ├── (tabs)/ # 标签导航 │ └── [id].tsx # 动态路由 ├── components/ │ ├── ui/ # 可复用组件 │ └── features/ ├── hooks/ ├── lib/ │ ├── api.ts │ └── storage.ts ├── store/ ├── constants/ └── app.json --- ## 导航模式 | 模式 | 用途 | |---------|-----| | Stack | 页面层级 | | Tabs | 底部导航 | | Drawer | 侧边菜单 | | Modal | 覆盖层屏幕 | --- ## 状态管理 | 类型 | 工具 | |------|------| | 本地 | Zustand | | 服务器 | React Query | | 表单 | React Hook Form | | 存储 | Expo SecureStore | --- ## 核心包 | 包 | 用途 | |---------|---------| | expo-router | 基于文件的路由 | | zustand | 本地状态 | | @tanstack/react-query | 服务器状态 | | nativewind | Tailwind 样式 | | expo-secure-store | 安全存储 | --- ## 设置步骤 1. `npx create-expo-app {{name}} -t expo-template-blank-typescript` 2. `npx expo install expo-router react-native-safe-area-context` 3. 安装状态管理: `npm install zustand @tanstack/react-query` 4. `npx expo start` --- ## 最佳实践 - 使用 Expo Router 进行导航 - 使用 Zustand 管理本地状态，React Query 管理服务器状态 - 使用 NativeWind 保持样式一致性 - 使用 Expo SecureStore 存储令牌 - 在 iOS 和 Android 上进行测试