用途
React Native Specialist 提供 React Native 开发方面的专业能力,重点覆盖“新架构”(Fabric/TurboModules)、JSI 以及 Expo 工作流。其目标是构建高性能的跨平台移动应用,包括自定义原生模块,以及优化 JavaScript 与原生之间的桥接。
主要能力
- 使用新架构构建高性能 React Native 应用。
- 编写自定义 Native Modules 或 View Managers(TurboModules/Fabric)。
- 配置 Expo 流水线,包括 EAS Build、Updates、Config Plugins。
- 调试原生崩溃(Xcode/Android Studio)或桥接瓶颈。
- 从旧架构(Bridge)迁移到新架构(JSI)。
- 集成复杂原生 SDK,例如 Maps、WebRTC、Bluetooth。
使用方式
资料给出的典型使用场景包括:
- 新架构迁移:逐步启用新架构标志,将 Native Modules 转换为 TurboModules,为复杂 UI 实现 Fabric 组件,使用 Codegen 生成原生桥接代码,并在启用新架构后充分测试。资料称可实现更快的 UI 渲染、更小的包体积、更好的类型安全以及更好的崩溃报告与调试。
- 自定义原生模块:以蓝牙低功耗为例,创建 TypeScript Native Module 接口,实现原生代码(iOS 用 Swift,Android 用 Kotlin),暴露 RNTurboModule 供跨平台访问,加入内存管理与生命周期处理,并实现完整的错误处理。
- 性能优化:启用 Hermes 引擎,用 FlashList 替换 FlatList,使用 useMemo/useCallback 进行记忆化,为图片和重型组件添加懒加载,并优化原生桥接通信。
资料还提供了 TurboModule 的创建流程:定义 Spec(NativeBattery.ts)、运行 yarn codegen 生成 C++ 接口、实现 iOS(RTNBattery.mm)与 Android(BatteryModule.kt)。以及 Reanimated Worklet 的示例,用于在 UI 线程上实现 60fps 拖拽手势。
适用场景
- 需要构建或优化使用新架构的 React Native 应用。
- 需要编写 TurboModules 或 Fabric 组件。
- 需要配置 Expo 的构建、更新与配置插件。
- 需要排查原生崩溃或桥接性能问题。
- 需要从旧 Bridge 架构迁移到 JSI 新架构。
- 需要集成 Maps、WebRTC、Bluetooth 等原生 SDK。
限制与注意事项
资料列出了若干反模式与注意事项:
- 避免“桥接穿越”式动画:不要使用 useNativeDriver: false 的 Animated.timing,也不要在 useEffect 中计算布局并 setState;应使用 Reanimated 或 useNativeDriver: true。
- 避免未启用 Hermes 的大包体:Android 上使用 JSC 会导致启动变慢;应启用 Hermes。
- 避免在 render 中内联样式:应使用 StyleSheet.create 或在组件外定义常量样式。
- 架构反模式包括:过度使用旧架构桥接、不必要的原生封装、状态管理方案泛滥、导航嵌套过深。
- 性能反模式包括:未做 React.memo 或优化导致全量重渲染、滥用 FlatList、内存泄漏、桥接瓶颈。
- 开发反模式包括:在生产环境使用调试模式、未启用 Hermes、包体过大、不必要的手动原生链接。
- 测试反模式包括:缺少 E2E 测试、过多平台条件判断、硬编码尺寸、缺少 testID。
资料还指出,若涉及修改 React Native 引擎核心(C++)、调试晦涩的 ProGuard/R8 崩溃、或从零编写底层 Metal/OpenGL 渲染器,应升级给原生移动开发者处理。
质量检查要点
- 性能:启用 Hermes;对昂贵 props 使用 useMemo/useCallback;使用 FlashList 替代 FlatList。
- 架构:在库支持的情况下启用 Fabric/TurboModules;使用原生屏幕导航(React Navigation / Expo Router)。
- 原生:优雅处理权限;React Native 版本保持在最近两个小版本内。
暂未提供的信息
资料未提供该技能的具体收费、价格、平台支持范围、安装命令或使用步骤等细节。