react-native-best-practices
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseReact Native Best Practices
React Native 最佳实践
Software Mansion's production patterns for React Native apps on the New Architecture.
Read the relevant sub-skill for the topic at hand. All sub-skills are in .
references/Software Mansion针对基于新架构的React Native应用制定的生产级实践方案。
请阅读与当前主题相关的子技能文档。所有子技能文档均位于目录下。
references/Sub-skills
子技能
| Sub-skill | When to use |
|---|---|
| CSS transitions, CSS animations, shared value animations, GPU shader animations (WebGPU, TypeGPU), layout animations (entering/exiting, transitions, keyframes), scroll-driven animations, animation functions (withSpring, withTiming, withDecay), core hooks (useSharedValue, useAnimatedStyle), interpolation, particle systems, procedural noise, SDF rendering, animation performance, 120fps, accessibility, Reanimated 4 |
| Tap, pan, pinch, rotation, swipe, long press, fling, hover, drag, Pressable, RectButton, Swipeable, DrawerLayout, VirtualGestureDetector, gesture composition, gesture testing -- any touch interaction with Gesture Handler |
| Vector graphics, icons, charts, illustrations using React Native SVG |
| On-device AI: LLMs (chat, tool calling, structured output), computer vision (classification, object detection, OCR, segmentation, style transfer, embeddings, text-to-image), speech processing (STT, TTS, VAD), VisionCamera real-time frame processing, model loading, resource management, custom models with ExecuTorch |
| Rich text editor, formatted text input, WYSIWYG, mentions, Markdown renderer, react-native-enriched, react-native-enriched-markdown |
| Multithreading, react-native-worklets, background processing, Worker Runtimes, UI thread, scheduleOnUI, scheduleOnRN, Serializable, Synchronizable, offloading computation from the JS thread |
| Audio playback (buffer sources, oscillators, streaming, queued playback), recording (file, data callback, graph processing), audio effects (gain, filters, delay, convolver, panner, waveshaper), real-time analysis and visualization, audio worklets (custom processing, synthesis), system integration (sessions, interruptions, notifications, permissions), testing with mocks -- any audio feature with react-native-audio-api |
| 子技能 | 使用场景 |
|---|---|
| CSS过渡、CSS动画、共享值动画、GPU着色器动画（WebGPU、TypeGPU）、布局动画（入场/退场、过渡、关键帧）、滚动驱动动画、动画函数（withSpring、withTiming、withDecay）、核心Hook（useSharedValue、useAnimatedStyle）、插值、粒子系统、程序化噪声、SDF渲染、动画性能、120fps、无障碍访问、Reanimated 4 |
| 点击、平移、捏合、旋转、滑动、长按、快滑、悬停、拖拽、Pressable、RectButton、Swipeable、DrawerLayout、VirtualGestureDetector、手势组合、手势测试——任何使用Gesture Handler的触摸交互场景 |
| 使用React Native SVG实现的矢量图形、图标、图表、插画 |
| 端侧AI：大语言模型（聊天、工具调用、结构化输出）、计算机视觉（分类、目标检测、OCR、分割、风格迁移、嵌入、文本生成图像）、语音处理（STT、TTS、VAD）、VisionCamera实时帧处理、模型加载、资源管理、基于ExecuTorch的自定义模型 |
| 富文本编辑器、格式化文本输入、WYSIWYG、提及功能、Markdown渲染器、react-native-enriched、react-native-enriched-markdown |
| 多线程、react-native-worklets、后台处理、Worker Runtime、UI线程、scheduleOnUI、scheduleOnRN、可序列化、可同步、将计算任务从JS线程卸载 |
| 音频播放（缓冲源、振荡器、流式传输、队列播放）、录制（文件、数据回调、图形处理）、音频效果（增益、滤波器、延迟、卷积器、声像器、波形整形器）、实时分析与可视化、音频Worklet（自定义处理、合成）、系统集成（会话、中断、通知、权限）、使用模拟进行测试——任何使用react-native-audio-api实现的音频功能 |