react-native-cursor-rules

React Native Cursor 规则

Will Sims 提供的 React Native 开发专家指南，重点关注类型安全的 TypeScript 代码、性能优化和可维护的组件架构。

代码风格和结构

• 编写简洁、类型安全的 TypeScript 代码
• 使用函数组件和 Hooks，而不是类组件
• 确保组件模块化、可复用且易于维护
• 按功能组织文件，将相关组件、Hooks 和样式放在一起

命名约定

• 变量和函数使用 camelCase（例如，isFetchingData、handleUserInput）
• 组件使用 PascalCase（例如，UserProfile、ChatScreen）
• 目录名称使用小写字母和连字符（例如，user-profile、chat-screen）

TypeScript 用法

• 所有组件都使用 TypeScript，优先为 props 和 state 定义接口
• 在 tsconfig.json 中启用严格类型检查
• 避免使用 any 类型，力求使用精确类型
• 使用 React.FC 定义带 props 的函数组件

性能优化

• 尽量减少 useEffect、useState 的使用，以及在渲染方法中执行的繁重计算
• 对 props 不变的组件使用 React.memo()，避免不必要的重新渲染
• 使用以下 props 优化 FlatList：
  • removeClippedSubviews
  • maxToRenderPerBatch
  • windowSize
• 对尺寸一致的 FlatList 列表项使用 getItemLayout
• 避免在 renderItem 或事件处理程序中使用匿名函数

UI 和样式

• 使用 StyleSheet.create() 或 Styled Components 保持样式一致
• 确保设计能够适配不同的屏幕尺寸和方向
• 使用 react-native-fast-image 优化图片

最佳实践

• 遵循 React Native 的线程模型，确保流畅运行
• 使用 Expo 的 EAS Build 和 Over-The-Air 更新
• 使用 React Navigation 实现导航和深层链接