- 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.
2.2 KiB
2.2 KiB
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 风格:极简、大气、具有呼吸感。
- 项目概况 (Project Profile) Role: 资深 React Native & 交互设计专家。 Project: 正在开发名为 "lamp" 的高性能 IM 系统,使用 OpenIM SDK 底层。 UI Style: 极致简约、大气、现代感。 > * 参考标准: 类似 Apple iMessage 或早期 Telegram。
视觉核心: 大量的留白、非衬线字体的层次感、轻微的阴影或细腻的边框、极简的配色方案(单色系或低饱和度点缀)。
交互要求: 动作必须丝滑,避免任何视觉上的拥挤感。
- 技术约束 (Technical Stack) Framework: Expo (Development Builds).
IM SDK: @openim/rn-client-sdk.
Performance: 必须使用 FlashList 处理消息,确保在大气布局下依然保持 60/120 FPS。
Code Style: TypeScript 严谨模式,函数式 Hooks。
- Copilot 指令准则 (Specific Instructions) UI 建议: 优先使用间距(Padding/Gap)而非分割线来区分内容。
字体: 强调字重(Font Weight)和大小的对比,而不是颜色的混杂。
代码架构: 逻辑与 UI 分离。将 OpenIM 的监听器、数据转换逻辑封装在自定义 Hooks 中(如 useChatList, useMessages)。
- 资料文档
- 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