用 monorepo 实现一套 React Native 代码同时跑 iOS、Android 与 Next.js Web 端

方案简介

本方案基于 brunolemos/react-native-web-monorepo 仓库（860 star），展示如何在 Yarn Workspaces monorepo 中组织代码，实现 iOS、Android 与 Web 三端 100% 代码共享。项目以 React Native 编写移动端，通过 React Native Web 将同一套组件渲染到浏览器，Web 端可选用 Next.js 或 Create React App 两种脚手架。全项目使用 TypeScript v4，并配置了 Prettier 与 ESLint 作为 pre-commit 钩子保证代码风格一致。仓库源自作者的教程，且有生产项目 DevHub 使用该方案。适合希望用一套代码同时覆盖移动端与 Web 端的 React 开发者。

亮点与能力

• iOS、Android、Web 三端 100% 代码共享
• Web 端支持 Next.js 与 Create React App 两种方案
• TypeScript v4 全量类型支持
• Prettier 与 ESLint 配置为 pre-commit 钩子
• 支持 CLI 与 Xcode/Android Studio 两种移动端运行方式
• 已有生产案例（DevHub）验证

组成与分工

• React Native：移动端（iOS/Android）UI 框架，v0.63
• React Native Web：将 React Native 组件渲染到浏览器，实现 Web 复用
• Next.js：Web 端一种可选脚手架，v10，用 yarn workspace web-nextjs dev 启动
• Create React App：Web 端另一种可选脚手架，v4，用 yarn workspace web-cra start 启动
• TypeScript：全仓静态类型，v4
• Yarn Workspaces：monorepo 工作区管理，划分 packages/mobile、packages/web-cra、packages/web-nextjs 等包
• Prettier / ESLint / husky：代码格式化与 lint，通过 pre-commit 钩子执行

前置要求

• Node.js 与 Yarn
• iOS 开发需 Xcode 与 CocoaPods
• Android 开发需 Android Studio
• 克隆与安装依赖：

实施步骤

1. 克隆仓库并安装依赖

$ git clone git@github.com:brunolemos/react-native-web-monorepo.git
$ cd react-native-web-monorepo
$ yarn

2. 启动 Web 端

CRA 方式：

$ yarn workspace web-cra start

Next.js 方式：

$ yarn workspace web-nextjs dev

3. 运行 iOS

先安装 iOS 原生依赖：

$ cd packages/mobile/ios && pod update && pod install && cd -

CLI 方式直接：

$ yarn ios

或使用 Xcode：先启动 Metro，再打开 Xcode 运行：

$ yarn workspace mobile start
$ yarn xcode

然后按 Run 按钮。

4. 运行 Android

CLI 方式：

$ yarn android

或使用 Android Studio：

$ yarn workspace mobile start
$ yarn studio

然后按 Run 按钮。

使用与配置要点

• Web 端二选一：CRA 用 yarn workspace web-cra start，Next.js 用 yarn workspace web-nextjs dev
• 移动端日常调试先启动 Metro（yarn workspace mobile start），再由 IDE 或 CLI 连接
• iOS 原生依赖变更后需重新执行 pod update && pod install
• 提交代码时 pre-commit 钩子会自动执行 Prettier 与 ESLint 检查

注意事项与常见问题

• iOS 首次运行前必须执行 CocoaPods 安装：cd packages/mobile/ios && pod update && pod install
• 使用 Xcode 或 Android Studio 运行前需先手动启动 Metro：yarn workspace mobile start
• 本仓库是教程配套源码，教程地址为 dev.to 上作者的文章
• 生产使用案例可参考 DevHub 项目，即启发本仓库的项目

优缺点

• ✓ 三端 100% 代码复用
• ✓ 已有生产项目验证
• ✕ Web 端需 React Native

出处

本方案挖掘自开源项目 brunolemos/react-native-web-monorepo，方案内容与实施命令均来自其 README 原文。