如何在Nx中搭建React Native Web环境？

1. 前置环境准备 #

• 本地需安装Node.js（推荐16.x及以上版本）、npm/yarn/pnpm任意包管理器
• 全局安装Nx CLI（或直接用npx调用）：npm install -g nx

2. 创建Nx工作区 #

• 初始化空工作区：

  npx create-nx-workspace@latest my-rn-web-workspace --preset=empty --cli=nx --package-manager=npm
  

• 进入工作区目录：cd my-rn-web-workspace

3. 添加核心依赖 #

• 安装Nx React Native插件：

  npm install -D @nx/react-native
  

• 安装Nx React Web插件：

  npm install -D @nx/react
  

• 安装React Native Web核心包：

  npm install react-native-web react-dom
  

4. 生成带Web支持的React Native应用 #

• 执行生成命令，关键是加上--web参数自动配置Web端支持：

  nx generate @nx/react-native:app my-rn-app --directory=apps/my-rn-app --bundleIdentifier=com.myrnapp --web
  

5. 验证并调整Web配置 #

• 检查自动生成的apps/my-rn-app/project.json，确认包含serve-web、build-web等任务目标
• 若需自定义Webpack配置，可修改（或创建）apps/my-rn-app/webpack.config.js，示例基础配置：

  const { composePlugins, withNx } = require('@nx/webpack');
  const { withReact } = require('@nx/react');
  const { withReactNativeWeb } = require('@nx/react-native');
  
  module.exports = composePlugins(withNx(), withReact(), withReactNativeWeb(), (config) => {
    // 这里可添加自定义配置，比如资源loader、别名等
    return config;
  });
  

6. 运行与构建Web端应用 #

• 启动Web开发服务器：

  nx serve-web my-rn-app
  

  打开浏览器访问http://localhost:4200即可看到应用
• 构建生产版本：

  nx build-web my-rn-app
  

  产物会输出到dist/apps/my-rn-app/web目录

7. 可选优化配置 #

• 平台专属样式：通过Platform对象区分Web端样式：

  import { Platform, StyleSheet } from 'react-native';
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      ...Platform.select({
        web: {
          maxWidth: 1200,
          margin: '0 auto'
        }
      })
    }
  });
  

• 路由适配：Web端可集成react-router-dom，RN端保留react-navigation，通过平台判断切换使用
• 静态资源处理：在Webpack配置中添加图片、字体等资源的loader规则，确保Web端正常加载

内容的提问来源于stack exchange，提问作者Mohamed Elshahawy