vercel-react-native-skills

对比查看原文与翻译

🇺🇸

原文

英文

🇨🇳

翻译

中文

React Native Skills

React Native 实践技巧

Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.

为React Native和Expo应用提供的全面最佳实践。涵盖性能、动画、UI模式和平台特定优化等多个类别的规则。

When to Apply

适用场景

Reference these guidelines when:

Building React Native or Expo apps
Optimizing list and scroll performance
Implementing animations with Reanimated
Working with images and media
Configuring native modules or fonts
Structuring monorepo projects with native dependencies

在以下场景中参考这些指南：

构建React Native或Expo应用
优化列表和滚动性能
使用Reanimated实现动画
处理图片和媒体资源
配置原生模块或字体
构建包含原生依赖的单仓库（Monorepo）项目

Rule Categories by Priority

按优先级划分的规则类别


list-performance-
animation-
navigation-
ui-
react-state-
rendering-
monorepo-
fonts-

Priority	Category	Impact	Prefix
1	List Performance	CRITICAL	`list-performance-`
2	Animation	HIGH	`animation-`
3	Navigation	HIGH	`navigation-`
4	UI Patterns	HIGH	`ui-`
5	State Management	MEDIUM	`react-state-`
6	Rendering	MEDIUM	`rendering-`
7	Monorepo	MEDIUM	`monorepo-`
8	Configuration	LOW	`fonts-` , `imports-`


list-performance-
animation-
navigation-
ui-
react-state-
rendering-
monorepo-
fonts-

优先级	类别	影响程度	前缀
1	列表性能	关键	`list-performance-`
2	动画	高	`animation-`
3	导航	高	`navigation-`
4	UI模式	高	`ui-`
5	状态管理	中	`react-state-`
6	渲染	中	`rendering-`
7	单仓库（Monorepo）	中	`monorepo-`
8	配置	低	`fonts-` , `imports-`

Quick Reference

快速参考

1. List Performance (CRITICAL)

1. 列表性能（关键）

```
list-performance-virtualize
```
- Use FlashList for large lists
```
list-performance-item-memo
```
- Memoize list item components
```
list-performance-callbacks
```
- Stabilize callback references
```
list-performance-inline-objects
```
- Avoid inline style objects
```
list-performance-function-references
```
- Extract functions outside render
```
list-performance-images
```
- Optimize images in lists
```
list-performance-item-expensive
```
- Move expensive work outside items
```
list-performance-item-types
```
- Use item types for heterogeneous lists

```
list-performance-virtualize
```
- 对大型列表使用FlashList
```
list-performance-item-memo
```
- 对列表项组件进行Memo化处理
```
list-performance-callbacks
```
- 稳定回调引用
```
list-performance-inline-objects
```
- 避免内联样式对象
```
list-performance-function-references
```
- 在渲染外部提取函数
```
list-performance-images
```
- 优化列表中的图片
```
list-performance-item-expensive
```
- 将耗时操作移出列表项
```
list-performance-item-types
```
- 对异构列表使用项类型

2. Animation (HIGH)

2. 动画（高）

```
animation-gpu-properties
```
- Animate only transform and opacity
```
animation-derived-value
```
- Use useDerivedValue for computed animations
```
animation-gesture-detector-press
```
- Use Gesture.Tap instead of Pressable

```
animation-gpu-properties
```
- 仅对transform和opacity属性执行动画
```
animation-derived-value
```
- 使用useDerivedValue实现计算式动画
```
animation-gesture-detector-press
```
- 使用Gesture.Tap替代Pressable

3. Navigation (HIGH)

3. 导航（高）

```
navigation-native-navigators
```
- Use native stack and native tabs over JS navigators

```
navigation-native-navigators
```
- 使用原生栈和原生标签导航器替代JS导航器

4. UI Patterns (HIGH)

4. UI模式（高）

```
ui-expo-image
```
- Use expo-image for all images
```
ui-image-gallery
```
- Use Galeria for image lightboxes
```
ui-pressable
```
- Use Pressable over TouchableOpacity
```
ui-safe-area-scroll
```
- Handle safe areas in ScrollViews
```
ui-scrollview-content-inset
```
- Use contentInset for headers
```
ui-menus
```
- Use native context menus
```
ui-native-modals
```
- Use native modals when possible
```
ui-measure-views
```
- Use onLayout, not measure()
```
ui-styling
```
- Use StyleSheet.create or Nativewind

```
ui-expo-image
```
- 对所有图片使用expo-image
```
ui-image-gallery
```
- 使用Galeria实现图片灯箱
```
ui-pressable
```
- 使用Pressable替代TouchableOpacity
```
ui-safe-area-scroll
```
- 在ScrollViews中处理安全区域
```
ui-scrollview-content-inset
```
- 对头部使用contentInset
```
ui-menus
```
- 使用原生上下文菜单
```
ui-native-modals
```
- 尽可能使用原生模态框
```
ui-measure-views
```
- 使用onLayout而非measure()
```
ui-styling
```
- 使用StyleSheet.create或Nativewind

5. State Management (MEDIUM)

5. 状态管理（中）

```
react-state-minimize
```
- Minimize state subscriptions
```
react-state-dispatcher
```
- Use dispatcher pattern for callbacks
```
react-state-fallback
```
- Show fallback on first render
```
react-compiler-destructure-functions
```
- Destructure for React Compiler
```
react-compiler-reanimated-shared-values
```
- Handle shared values with compiler

```
react-state-minimize
```
- 减少状态订阅
```
react-state-dispatcher
```
- 对回调使用调度器模式
```
react-state-fallback
```
- 在首次渲染时显示回退内容
```
react-compiler-destructure-functions
```
- 为React Compiler进行解构
```
react-compiler-reanimated-shared-values
```
- 配合编译器处理共享值

6. Rendering (MEDIUM)

6. 渲染（中）

```
rendering-text-in-text-component
```
- Wrap text in Text components
```
rendering-no-falsy-and
```
- Avoid falsy && for conditional rendering

```
rendering-text-in-text-component
```
- 将文本包裹在Text组件中
```
rendering-no-falsy-and
```
- 避免使用falsy &&进行条件渲染

7. Monorepo (MEDIUM)

7. 单仓库（Monorepo）（中）

```
monorepo-native-deps-in-app
```
- Keep native dependencies in app package
```
monorepo-single-dependency-versions
```
- Use single versions across packages

```
monorepo-native-deps-in-app
```
- 将原生依赖保留在应用包中
```
monorepo-single-dependency-versions
```
- 在所有包中使用统一的依赖版本

8. Configuration (LOW)

8. 配置（低）

```
fonts-config-plugin
```
- Use config plugins for custom fonts
```
imports-design-system-folder
```
- Organize design system imports
```
js-hoist-intl
```
- Hoist Intl object creation

```
fonts-config-plugin
```
- 使用配置插件处理自定义字体
```
imports-design-system-folder
```
- 组织设计系统的导入
```
js-hoist-intl
```
- 提升Intl对象创建

How to Use

使用方法

Read individual rule files for detailed explanations and code examples:

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

Each rule file contains:

Brief explanation of why it matters
Incorrect code example with explanation
Correct code example with explanation
Additional context and references

阅读单个规则文件获取详细说明和代码示例：

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

每个规则文件包含：

规则重要性的简要说明
错误代码示例及解释
正确代码示例及解释
额外背景信息和参考资料

Full Compiled Document

完整编译文档

For the complete guide with all rules expanded:

AGENTS.md

如需查看包含所有扩展规则的完整指南：

AGENTS.md