React Native 最佳实践指南：性能优化、动画、UI模式与配置规则

vercel-react-native-skills by dishaanand/focusnest

1 周安装量

GitHub

安装命令

npx skills add https://github.com/dishaanand/focusnest --skill vercel-react-native-skills

React 移动应用性能优化

🇨🇳中文介绍

React Native 技能

适用于 React Native 和 Expo 应用程序的综合性最佳实践。包含涵盖性能、动画、UI 模式以及平台特定优化的多类别规则。

何时应用

在以下情况下参考这些指南：

构建 React Native 或 Expo 应用时
优化列表和滚动性能时
使用 Reanimated 实现动画时
处理图像和媒体时
配置原生模块或字体时
构建包含原生依赖项的 monorepo 项目时

按优先级划分的规则类别

优先级	类别	影响	前缀
1	列表性能	关键	`list-performance-`
2	动画	高	`animation-`
3	导航	高	`navigation-`

🇺🇸English

React Native Skills

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

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

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	List Performance	CRITICAL	`list-performance-`
2	Animation	HIGH	`animation-`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

1. 列表性能 (关键)

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

animation-gpu-properties - 仅对变换和透明度属性进行动画处理
animation-derived-value - 使用 useDerivedValue 处理计算动画
animation-gesture-detector-press - 使用 Gesture.Tap 替代 Pressable

navigation-native-navigators - 优先使用原生堆栈和原生标签页导航器，而非 JS 导航器

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. 状态管理 (中)

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

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

monorepo-native-deps-in-app - 将原生依赖项保留在应用包中
monorepo-single-dependency-versions - 跨包使用单一版本

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

阅读各个规则文件以获取详细解释和代码示例：

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

每个规则文件包含：

简要说明其重要性
带有解释的错误代码示例
带有解释的正确代码示例
额外的上下文和参考资料

包含所有规则详细说明的完整指南：AGENTS.md

1. List Performance (CRITICAL)

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

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

3. Navigation (HIGH)

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

4. UI Patterns (HIGH)

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

5. State Management (MEDIUM)

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

6. Rendering (MEDIUM)

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

7. Monorepo (MEDIUM)

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

8. Configuration (LOW)

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

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

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

GSAP React 动画库使用指南：useGSAP Hook 与最佳实践

2,400 周安装

React Native 最佳实践指南：性能优化、动画、UI模式与配置规则

🇨🇳中文介绍

React Native 技能

何时应用

按优先级划分的规则类别

🇺🇸English

React Native Skills

When to Apply

Rule Categories by Priority

相关 Skills

快速参考

1. 列表性能 (关键)

2. 动画 (高)

3. 导航 (高)

4. UI 模式 (高)

5. 状态管理 (中)

6. 渲染 (中)

7. Monorepo (中)

8. 配置 (低)

如何使用

完整编译文档

Quick Reference