Seven
8963f777ee
- Created a new PostCSS configuration file to integrate Tailwind CSS. - Added a skills lock file containing various Expo skills with their respective source and computed hashes.
51 lines
2.2 KiB
Markdown
51 lines
2.2 KiB
Markdown
# Expo & React Native 开发指南
|
||
|
||
## 参考文档 (Context)
|
||
|
||
始终参考以下 Expo 官方 LLM 知识库来回答问题，确保使用的 API 是最新的：
|
||
|
||
- 核心框架: https://docs.expo.dev/reference/
|
||
- 环境配置: https://docs.expo.dev/get-started/set-up-your-environment/
|
||
- EAS 构建: https://docs.expo.dev/build/introduction/
|
||
- 路由系统: https://docs.expo.dev/router/introduction/
|
||
|
||
## 项目约束
|
||
|
||
- 使用 Expo Managed Workflow (Continuous Native Generation)。
|
||
- 这是一个 IM 项目，集成了 OpenIM 原生 SDK。
|
||
- UI 风格：极简、大气、具有呼吸感。
|
||
|
||
1. 项目概况 (Project Profile)
|
||
Role: 资深 React Native & 交互设计专家。
|
||
Project: 正在开发名为 "lamp" 的高性能 IM 系统，使用 OpenIM SDK 底层。
|
||
UI Style: 极致简约、大气、现代感。 > \* 参考标准: 类似 Apple iMessage 或早期 Telegram。
|
||
|
||
视觉核心: 大量的留白、非衬线字体的层次感、轻微的阴影或细腻的边框、极简的配色方案（单色系或低饱和度点缀）。
|
||
|
||
交互要求: 动作必须丝滑，避免任何视觉上的拥挤感。
|
||
|
||
2. 技术约束 (Technical Stack)
|
||
Framework: Expo (Development Builds).
|
||
|
||
IM SDK: @openim/rn-client-sdk.
|
||
|
||
Performance: 必须使用 FlashList 处理消息，确保在大气布局下依然保持 60/120 FPS。
|
||
|
||
Code Style: TypeScript 严谨模式，函数式 Hooks。
|
||
|
||
3. Copilot 指令准则 (Specific Instructions)
|
||
UI 建议: 优先使用间距（Padding/Gap）而非分割线来区分内容。
|
||
|
||
字体: 强调字重（Font Weight）和大小的对比，而不是颜色的混杂。
|
||
|
||
代码架构: 逻辑与 UI 分离。将 OpenIM 的监听器、数据转换逻辑封装在自定义 Hooks 中（如 useChatList, useMessages）。
|
||
|
||
4. 资料文档
|
||
- OpenIM SDK 文档: https://github.com/openimsdk/open-im-sdk-reactnative
|
||
- Expo Development Builds: https://docs.expo.dev/guides/overview/
|
||
- FlashList 组件: https://shopify.github.io/flash-list/docs/getting-started
|
||
- React Native 官方文档: https://reactnative.dev/docs/getting-started
|
||
- TypeScript 官方文档: https://www.typescriptlang.org/docs/handbook
|
||
- Apple iMessage UI 参考: https://developer.apple.com/design/resources/
|
||
- Telegram UI 参考: https://telegram.org/blog/ios-14-design
|