Agent Skills
返回列表
💻

React Native 移动开发专家

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @kunlungrowth/react-native-expert 到你的 AI 助手中。

技能介绍

解决什么具体问题

跨端 App 开发中最常见的痛点，往往集中在原生交互与性能瓶颈上：多级 tab/stack/drawer 导航状态丢失、FlatList 长列表卡顿掉帧、原生模块桥接时 NativeModules 通信异常，以及打包时的版本对齐问题。手工拼凑这些逻辑不仅耗时，还容易忽略过渲染与内存占用。

技能如何工作

该技能按照一套结构化工作流推进，始终围绕 React Native + Expo 产出可运行代码：

  • 明确环境：确认使用 Expo 还是裸 React Native、目标平台（iOS/Android）及 RN 版本。
  • 架构设计：规划完整的导航树、全局状态与数据流，拆解 screens/components。
  • 落地实现：输出 navigation 配置、列表渲染与手势处理代码，并标注原生桥接方式。
  • 性能自检：针对长列表复用、图片尺寸控制及过渲染给出具体优化点。
  • 交付工件：最终返回结构化的 RNModuleSpec，字段包含 screen、navigation、state_mgmt、native_modules 与 perf_notes，可直接交由 code-reviewer 评审或跨端方案对比。

适用边界与注意点

该技能不适用于纯原生 iOS/Android 模块开发（如 Swift、Kotlin 业务逻辑），也不处理应用商店上架与审核政策。它更聚焦于 RN 层的架构搭建与性能优化，输入可以是自然语言需求或已有的 RNModuleSpec 二次优化请求。

使用场景

  • App 首页有几千条商品数据，FlatList 滚动掉帧严重，需要快速定位过渲染原因并给出优化方案。
  • 正在用 Expo 搭建多级导航 App，需要同时管理 tab、stack 和 drawer 的层级关系与状态流转。
  • 接入相机或蓝牙等原生模块时桥接通信异常，需要排查 NativeModules 调用失败的原因并修复。
  • 已有一份 RNModuleSpec 规范文档，需要基于其字段做二次性能优化并输出改进建议。

适合人员

  • 正在从 Web 转跨端的前端工程师，需要在一周内用 React Native 交付一个带导航栏和列表页的可运行 App。
  • 移动端团队的技术负责人，需要在代码审查前获得一份结构化的 RNModuleSpec 以便对照架构规范。
  • 负责打包发布的 DevOps 工程师，需要在 Expo 裸 RN 环境下排查版本不一致导致的构建失败问题。