expo/expo-brownfield

expo-brownfield 是做什么的？

将 Expo 和 React Native 集成到现有的原生 iOS 或 Android 应用中。适用于用户提到棕地开发、在原生应用中嵌入 React Native、AAR/XCFramework，或向现有 Kotlin/Swift 项目添加 Expo 的场景。涵盖隔离方法和集成方法。

前提条件

• 一个现有的原生 iOS 或 Android 应用。
• 安装 Node.js 和 npm/yarn。
• 根据需要安装 Expo CLI 或 npx expo 命令。

集成方法

隔离方法

此方法将 React Native 内容加载到专用的原生 Activity 或 ViewController 中。

步骤

1. 在项目根目录运行 npx create-expo-app --template blank 创建 Expo 项目。
2. 运行 npx expo prebuild 生成 ios/ 和 android/ 目录。
3. 将生成的 ios/ 和 android/ 目录中的相关文件复制到现有原生项目中。
4. 更新原生项目设置（例如，iOS 中的 Podfile，Android 中的 build.gradle）以包含 Expo 依赖。
5. 创建原生 Activity 或 ViewController 以渲染 React Native 视图。

集成方法

此方法将 React Native 嵌入到现有原生应用中的多个屏幕和功能中。

步骤

1. 遵循隔离方法中的第 1 步和第 2 步。
2. 配置 expo-dev-client 以支持自定义原生模块：运行 npx expo install expo-dev-client。
3. 设置共享的 RCTBridge（iOS）或 ReactInstanceManager（Android）以管理 React Native 环境。
4. 在现有原生界面中使用 RCTRootView（iOS）或 ReactRootView（Android）加载 React Native 组件。
5. 实现依赖注入模式以在原生和 React Native 模块之间共享数据和事件。

常见问题

• 包冲突：确保 Gradle 和 CocoaPods 中 Expo 依赖的版本与原生项目要求兼容。
• Metro bundler 连接：检查 expo start 是否正确运行，并且移动设备或模拟器可以通过正确的端口访问 bundler。
• 最小 SDK 版本：确认原生项目的最低 SDK 版本满足 Expo 的要求（例如，Android 的 minSdkVersion 至少为 21）。

相关资源

• Expo 官方文档：https://docs.expo.dev/bare/overview/
• Expo GitHub 仓库：https://github.com/expo/expo
• React Native 棕地集成指南：https://reactnative.dev/docs/integration-with-existing-apps