react-native-skills

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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
```
- 在ScrollView中处理安全区域
```
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