React Native

核心用法

React Native 使用 JavaScript/TypeScript 和 React 编写代码，通过桥接层调用原生组件渲染，实现「Learn once, write anywhere」。开发者使用熟悉的 React 范式（组件、Hooks、JSX），但需适配移动端特性：用 FlatList 替代长列表的 map+ScrollView，用 StyleSheet.create 管理样式，用 React Navigation 处理路由栈。

开发流程支持两条路径：Expo 托管工作流（零配置、快速迭代，适合 MVP 和常规需求）和裸工作流/原生 CLI（完全可控，需手动链接原生依赖）。expo-dev-client 成为折中方案——无需 eject 即可使用原生模块。

显著优点

• 开发效率：热重载、Ota 更新、跨平台代码复用率通常达 80%+
• 性能：Hermes 引擎将启动时间缩短 50%+，动画可通过 useNativeDriver 跑在 UI 线程
• 生态成熟：Expo SDK 覆盖相机、定位、通知等高频需求，社区库丰富
• Native 能力：可编写原生模块（TurboModules）或直接使用 Swift/Kotlin 代码
• 调试工具：Flipper 集成网络、布局、性能分析，Hermes 支持 Chrome DevTools

潜在局限

• 平台差异：阴影、边框裁剪、状态栏、返回键等行为需 Platform.select 处理
• 复杂动画：超过 60fps 的连续手势动画仍逊于纯原生（如 Flutter、SwiftUI）
• 包体积：Hermes 虽优化了内存，但 RN 引擎本身带来约 3-5MB 增量
• New Architecture 迁移：Fabric/TurboModules 为可选升级，第三方库兼容性需验证
• 调试盲区：原生崩溃不在 JS 调试器显示，需 Xcode/Android Studio 日志排查

适合人群

• 已有 React/Web 经验，希望快速进入移动领域的团队
• 需同时覆盖 iOS/Android，但预算/人力有限的中早期项目
• 以内容展示、表单、电商为主的场景（非重度游戏/图形应用）
• 追求迭代速度优先于极致性能的 SaaS、社交、工具类应用

常规风险

• 列表性能：忘记 keyExtractor 或误用 ScrollView 导致内存爆炸、卡顿
• 导航状态污染：传递非序列化参数（函数、类实例）破坏深链和状态恢复
• 订阅泄漏：useEffect 缺少 cleanup 返回函数，造成内存泄漏和异常回调
• 样式陷阱：inline styles 导致每次渲染新建对象，触发不必要的重渲染
• 构建缓存：原生依赖变更后未执行 pod install 或 gradlew clean，引发诡异编译错误

核心用法

React Native 技能是一套面向跨平台移动应用开发的综合性规则库，聚焦于组件性能、状态管理、导航配置、原生模块集成等关键领域。其核心用法包括：

• 组件性能优化：强制使用 FlatList 替代 ScrollView 处理超过 10 项的列表，利用虚拟化避免内存爆炸；通过 keyExtractor 返回稳定唯一标识，防止重排序和删除时的渲染异常；配合 React.memo 和 useCallback 减少不必要的重渲染。

• 状态管理策略：倡导最小化状态提升，仅在最近公共祖先处共享状态；明确区分 useState（组件级）与全局状态管理工具（Redux/Zustand）的适用场景；利用 useMemo 缓存昂贵计算，但警惕缓存本身的开销。

• 导航与路由：以 React Navigation 为标准方案，Expo 项目推荐文件式路由的 Expo Router；强调 navigation.reset 在认证流程中的栈清理作用，以及 useFocusEffect 处理屏幕聚焦副作用。

• 样式与平台适配：StyleSheet.create 外置定义避免重复创建；通过 Platform.select 处理 iOS/Android 差异（如阴影、溢出裁剪、返回键行为）；所有尺寸使用 DP 单位而非原始像素。

• 原生模块与构建：优先使用 Expo 模块避免脱壳；expo-dev-client 平衡原生能力需求与开发效率；Hermes 引擎启用、Flipper 调试工具链、EAS Build CI/CD 流水线构成完整工程化体系。

显著优点

1. 性能导向的细致规则：从 FlatList 虚拟化到 useNativeDriver 动画优化，覆盖移动端性能瓶颈的关键场景。
2. 平台差异显性化：明确记录 iOS/Android 在阴影、裁剪、返回键、状态栏等 10+ 处行为差异，减少跨平台调试成本。
3. 工程化最佳实践：涵盖缓存清理、Pod 安装、Gradle 构建等真实开发痛点，附带 npx react-native clean 等实用命令。
4. 安全无害：纯 Markdown 文档，无可执行代码，零外部依赖，零网络通信。

潜在缺点与局限性

1. 来源可信度限制：T3 级个人开发者维护，缺乏企业级背书，长期更新承诺不确定。
2. 版本敏感性：React Native 迭代迅速（New Architecture 生态、Expo SDK 版本），部分规则可能随版本过期。
3. 无交互式示例：纯文本规则，缺乏可运行的代码片段或沙箱验证环境。
4. 框架生态偏向：重度偏向 React Navigation 与 Expo 生态，对其他导航方案（如 React Native Navigation）覆盖不足。

适合人群

• 具备 React 基础、转向移动端开发的工程师
• 需要快速建立 React Native 项目规范的团队技术负责人
• 遭遇列表卡顿、内存泄漏、平台样式不一致等具体问题的开发者

常规风险

• 内容过时风险：未标注 React Native/Expo 版本适配范围，建议使用者对照官方文档交叉验证。
• 误配置风险：部分规则（如 New Architecture 启用）涉及不可逆的构型变更，生产环境启用前需充分测试库兼容性。
• 平台测试缺失：规则虽列举差异，但无法强制约束开发者进行真机双平台验证，可能导致遗漏。