react-native-cursor-rules

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Native Cursor Rules

React Native 开发准则

Expert guidelines for React Native development by Will Sims, focusing on type-safe TypeScript code, performance optimization, and maintainable component architecture.

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

Code Style and Structure

代码风格与结构

Write concise, type-safe TypeScript code
Use functional components and hooks instead of class components
Ensure components are modular, reusable, and maintainable
Organize files by feature, grouping related components, hooks, and styles

编写简洁、类型安全的TypeScript代码
使用函数式组件和Hooks替代类组件
确保组件具备模块化、可复用性和可维护性
按功能组织文件，将相关组件、Hooks和样式归为一组

Naming Conventions

命名规范

Use camelCase for variables and functions (e.g.,
```
isFetchingData
```
,
```
handleUserInput
```
)
Use PascalCase for components (e.g.,
```
UserProfile
```
,
```
ChatScreen
```
)
Directory names should be lowercase and hyphenated (e.g.,
```
user-profile
```
,
```
chat-screen
```
)

变量和函数使用小驼峰命名（例如：
```
isFetchingData
```
、
```
handleUserInput
```
）
组件使用大驼峰命名（例如：
```
UserProfile
```
、
```
ChatScreen
```
）
目录名称使用小写连字符格式（例如：
```
user-profile
```
、
```
chat-screen
```
）

TypeScript Usage

TypeScript 用法

Use TypeScript for all components, favoring interfaces for props and state
Enable strict typing in
```
tsconfig.json
```
Avoid
```
any
```
type; strive for precise types
Utilize
```
React.FC
```
for defining functional components with props

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

Performance Optimization

性能优化

Minimize
```
useEffect
```
,
```
useState
```
, and heavy computations in render methods
Use
```
React.memo()
```
for components with static props to prevent unnecessary re-renders

Optimize FlatLists with the following props:

```
removeClippedSubviews
```
```
maxToRenderPerBatch
```
```
windowSize
```

Use
```
getItemLayout
```
for consistent-sized FlatList items
Avoid anonymous functions in
```
renderItem
```
or event handlers

减少
```
useEffect
```
、
```
useState
```
的使用，避免在渲染方法中进行大量计算
为具有静态props的组件使用
```
React.memo()
```
，防止不必要的重渲染

使用以下props优化FlatList：

```
removeClippedSubviews
```
```
maxToRenderPerBatch
```
```
windowSize
```

为尺寸一致的FlatList项使用
```
getItemLayout
```
避免在
```
renderItem
```
或事件处理程序中使用匿名函数

UI and Styling

UI与样式

Use consistent styling via
```
StyleSheet.create()
```
or Styled Components
Ensure responsive design for different screen sizes and orientations
Optimize images using
```
react-native-fast-image
```

通过
```
StyleSheet.create()
```
或Styled Components实现统一样式
确保针对不同屏幕尺寸和方向的响应式设计
使用
```
react-native-fast-image
```
优化图片

Best Practices

最佳实践

Follow React Native's threading model for smooth performance
Utilize Expo's EAS Build and Over-The-Air updates
Use React Navigation for navigation and deep linking

遵循React Native的线程模型以保证流畅性能
利用Expo的EAS Build和空中（Over-The-Air）更新功能
使用React Navigation进行导航和深度链接