mcpField
R
react-native-brownfield-migration

react-native-brownfield-migration

github.com/callstackincubator开发1.7k5.3k 次安装3 周前更新
代码仓库

关于 react-native-brownfield-migration

指导使用 `@callstack/react-native-brownfield` 将 React Native 逐步引入现有原生应用的技能,面向已决定迁移的团队。它将 Expo 与裸 React Native 流程分开。

主要功能

  1. 01选择 Expo 或裸 RN 路径
  2. 02配置 `@callstack/react-native-brownfield`
  3. 03打包 XCFramework 和 AAR 产物
  4. 04将 RN 界面集成到宿主应用
  5. 05验证启动和运行状态

适用场景

  1. 01向现有原生应用引入 React Native
  2. 02生成 iOS XCFramework 产物
  3. 03生成并发布 Android AAR 产物
  4. 04逐步集成 RN 屏幕

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/callstackincubator/agent-skills --skill react-native-brownfield-migration

安装后在 Claude Code 中输入/react-native-brownfield-migration确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
bare-android-aar-generation.md
bare-android-native-integration.md
bare-ios-native-integration.md
bare-ios-xcframework-generation.md
bare-quick-start.md
cli-and-config.md
expo-android-integration.md
expo-create-app.md
expo-ios-integration.md
expo-quick-start.md
quick-start.md
runtime-api.md

详细介绍

迁移到 React Native

仅在决定采用棕地迁移后使用此技能。如果用户仍在考虑棕地迁移、绿地开发、基于检查点的路径、暂缓还是不迁移,请先使用 assess-react-native-migration。

概述

使用 @callstack/react-native-brownfield 在现有原生应用中逐步采用 React Native 的规定性工作流,从初始设置到分阶段集成宿主应用。

  • Expo 路径
  • 纯 React Native 路径

每项任务只使用一条路径,除非用户明确要求进行迁移或比较。

迁移策略

使用以下策略规划并执行棕地迁移:

  1. 评估应用状态并选择 Expo 或纯 React Native 路径。
  2. 使用 @callstack/react-native-brownfield 进行初始设置。
  3. 从 React Native 源应用打包 RN 构件(XCFramework/AAR)。
  4. 将一个 RN 界面集成到宿主应用,并验证启动和运行时。
  5. 按功能或屏幕重复集成,逐步推出。

Agent 全局防护规则

对所有参考文件应用以下规则:

  1. 先选择一条路径(Expo 或纯 React Native),不要混用步骤。
  2. 使用文档中的占位符(<framework_target_name>、<android_module_name>、<registered_module_name>),并根据项目文件确定其实际值。
  3. 验证每条打包命令后,再进行宿主应用集成。
  4. 依赖这些参考资料中的任何标志表之前,先运行 npx brownfield <command> --help;以帮助输出为准。
  5. 将稳定的项目设置写入 brownfield.config.* 一次,而不要反复传入标志——参见 cli-and-config.md。
  6. 较长的平台代码片段和 CLI 选项详情优先参考官方文档。
  7. 尽可能通过外观层方法,避免宿主应用直接依赖 React Native API。
  8. 验证启动和运行时行为时,使用 agent-device 打开宿主应用,导航到 RN 界面,捕获快照或屏幕截图,并收集设备证据。如果缺少该工具且验证需要使用它,请通过环境批准或信任的途径安装,或请用户安装或启用它。

权威文档

路径选择关卡(必须首先执行)

选择任何参考文件前,先对项目进行分类:

  1. 如果尚无 React Native 应用,请使用 Expo 创建路径:
  2. 如果已有 React Native 应用,请检查 package.json 和 app.json:
    • 如果存在 expo,或用户要求使用 Expo 插件工作流,则选择 Expo。
    • 如果使用原生目录和直接的 RN CLI 工作流,且不需要 Expo 路径要求,则选择纯 React Native。
  3. 如果仍不明确,请提出一个澄清问题。
  4. 只沿一条路径继续。

适用场景

在以下情况下参考此软件包:

  • 实施已获批准的渐进式迁移,将仅使用原生技术的应用迁移到 React Native 或 Expo
  • 为 Expo 或裸 React Native 项目创建棕地集成流程
  • 使用 @callstack/react-native-brownfield 进行初始设置
  • 从 React Native 应用生成 iOS XCFramework 工件
  • 从 React Native 应用生成并发布 Android AAR 工件
  • 将生成的工件集成到宿主 iOS/Android 应用中

快速参考

文件说明
quick-start.md通用预检和强制路径选择关卡
cli-and-config.mdCLI 命令、完整标志集、配置文件、工件布局、代码生成的副作用
runtime-api.md宿主 <-> RN API 接口(JS、Swift、Kotlin)和参考应用
expo-create-app.md在 Expo 棕地设置前搭建新的 Expo 应用
expo-quick-start.mdExpo 插件设置和打包准备
expo-ios-integration.mdExpo iOS 打包和宿主启动集成
expo-android-integration.mdExpo Android 打包、发布和宿主集成
bare-quick-start.md裸 React Native 基线设置
bare-ios-xcframework-generation.md裸 iOS XCFramework 生成
bare-android-aar-generation.md裸 Android AAR 生成和发布
bare-ios-native-integration.md裸 iOS 宿主集成
bare-android-native-integration.md裸 Android 宿主集成

问题 -> 技能映射

问题从这里开始
需要先决定迁移路径assess-react-native-migration
需要决定采用 Expo 还是裸路径quick-start.md
需要查询 CLI 标志、配置文件结构或工件路径cli-and-config.md
需要查询宿主 <-> RN API 名称、签名或可运行的示例应用runtime-api.md
需要在宿主和 RN 之间共享状态,或实现类型化的 RN -> 原生导航brownie / brownfield-navigation 技能
需要为棕地集成创建新的 Expo 应用expo-create-app.md
需要设置 Expo 棕地集成和插件连接expo-quick-start.md
需要集成 Expo iOS 棕地项目expo-ios-integration.md
需要集成 Expo Android 棕地项目expo-android-integration.md
需要设置裸 RN 基线bare-quick-start.md
需要生成裸 RN iOS XCFrameworkbare-ios-xcframework-generation.md
需要生成/发布裸 RN Android AARbare-android-aar-generation.md
需要集成裸 RN iOS 宿主bare-ios-native-integration.md
需要集成裸 RN Android 宿主bare-android-native-integration.md

相关技能

  • 选择迁移路径前,请先评估 React Native 迁移。
  • brownie(共享宿主与 RN 状态)和 brownfield-navigation(带类型的 RN -> 原生导航)来自另一个仓库:请按名称调用;如果未安装,请改用规范文档。

评论

支持 Markdown