react-native-guidelines

React Native 指南

属于 Agent Skills™，由 googleadsagent.ai™ 提供

描述

React Native 指南将 16 条规则归纳为 7 个部分：性能、布局、动画、图像、状态、架构和平台，旨在避免跨平台移动开发中最常见的问题。每条规则都针对 React Native 桥接架构和原生渲染管线中特有的一种故障模式。

React Native 的性能特征与 Web React 有着根本差异。JavaScript 线程、UI 线程和原生模块线程以异步方式通信，任何线程出现瓶颈都会降低用户体验。这些指南重点关注如何避免阻塞 JS 线程、使用原生驱动执行动画、优化 FlatList 渲染，以及尽量减少桥接调用。

这些规则适用于同时运行在 iOS 和 Android 上的生产应用。指南会明确说明平台特定行为、手势处理差异和导航模式，而不将其视为边缘情况。

使用场景

• 构建新的 React Native 屏幕或组件
• 调试 iOS 或 Android 上的性能问题
• 审查 React Native 代码的跨平台正确性
• 实现动画或手势交互
• 优化大型数据集的列表渲染
• 处理平台特定的行为差异

工作原理

graph TD
    A[React Native Code] --> B{Section Analysis}
    B --> C[Performance: JS Thread Budget]
    B --> D[Layout: Flexbox + Safe Areas]
    B --> E[Animation: Native Driver]
    B --> F[Images: Caching + Sizing]
    B --> G[State: Minimal Re-renders]
    B --> H[Architecture: Navigation + Deep Links]
    B --> I[Platform: iOS/Android Specifics]
    C --> J[Optimized Output]
    D --> J
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

每个部分包含 2–3 条针对该类别中影响最大的事项的重点规则。代码生成时会应用这些规则，审查时则会标记违反规则的情况。

实现

性能：优化 FlatList

// BAD: Re-creates renderItem on every render
<FlatList
  data={items}
  renderItem={({ item }) => <Card item={item} />}
/>

// GOOD: Stable renderItem + keyExtractor + windowing config
const renderItem = useCallback(
  ({ item }: { item: Item }) => <Card item={item} />,
  []
);

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  getItemLayout={(_, index) => ({
    length: CARD_HEIGHT,
    offset: CARD_HEIGHT * index,
    index,
  })}
  maxToRenderPerBatch={10}
  windowSize={5}
  removeClippedSubviews
/>

动画：使用原生驱动

// BAD: JS-driven animation blocks the thread
Animated.timing(opacity, {
  toValue: 1,
  duration: 300,
  useNativeDriver: false,
}).start();

// GOOD: Native driver runs on UI thread
Animated.timing(opacity, {
  toValue: 1,
  duration: 300,
  useNativeDriver: true,
}).start();

// BEST: Reanimated for gesture-driven animations
const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ translateX: withSpring(offset.value) }],
}));

平台：安全区域处理

import { useSafeAreaInsets } from "react-native-safe-area-context";

function Screen({ children }: PropsWithChildren) {
  const insets = useSafeAreaInsets();
  return (
    <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
      {children}
    </View>
  );
}

最佳实践

• 优化前先使用 Flipper 或 React DevTools 进行分析——先测量，不要猜测
• 将 JS 线程每帧的耗时控制在 16ms 以内，以实现 60fps 渲染
• 所有透明度和变换动画都使用 useNativeDriver: true
• 避免在列表项中使用内联样式——静态样式应使用 StyleSheet.create
• 处理 iOS 和 Android 上的安全区域、刘海屏和手势导航
• 在真机上测试，而不只是使用模拟器——性能差异显著

平台兼容性

平台	支持情况	说明
Cursor	完全支持	支持 React Native 项目
VS Code	完全支持	React Native Tools 扩展
Windsurf	完全支持	支持移动开发
Claude Code	完全支持	代码生成 + 审查
Cline	完全支持	支持 React Native
aider	部分支持	移动开发上下文有限

相关技能

• React 最佳实践
• 组合模式
• Web 设计指南
• CI/CD 流水线

关键词

react-native mobile performance flatlist native-driver animation safe-area cross-platform ios android

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License