如何在Expo Bare Workflow的React Native项目中实现Web版本

阿华AIGC实验室

2026-4-29

我完全懂你这种纠结——Expo Managed模式点几下就能生成Web版本，可到了Bare Workflow就没那么省心了，我之前折腾这个也花了不少时间，给你整理一套亲测可行的步骤，一步步来就能搞定：

在Expo Bare Workflow项目中添加Web支持的完整指南

1. 先装齐必备依赖

首先得把Web端需要的核心包装上，这些是基础：

# npm 版本
npm install react-native-web @expo/webpack-config react-dom

# 或者用 yarn
yarn add react-native-web @expo/webpack-config react-dom

解释下：react-native-web负责把React Native组件转译为Web能用的DOM元素；@expo/webpack-config是Expo官方封装的Webpack配置，帮我们省去自己写复杂配置的麻烦；react-dom是Web端渲染的核心依赖。

2. 创建Web端入口文件

在项目根目录新建一个web文件夹，然后在里面创建index.js，内容如下：

import { registerRootComponent } from 'expo';
import App from '../App';

// 用Expo的注册方法启动App，和原生端保持一致
registerRootComponent(App);

3. 配置package.json的脚本命令

打开项目根目录的package.json，在scripts里新增两个命令：

"scripts": {
  // 保留你原来的所有脚本，比如 android/ios/start 这些
  "web": "expo start --web",
  "build:web": "expo export --web"
}

之后启动Web开发服务就用npm run web，打包生产版本用npm run build:web就行。

4. 适配组件和API（关键步骤）

很多React Native组件和Expo API在Web端不是100%兼容，得做些小调整：

大部分RN基础组件（比如View/Text/Image）react-native-web已经自动适配了，不用改；
对于Expo专属API（比如expo-camera、expo-location），先确认是否支持Web——如果不支持，就用Platform.OS做条件渲染：

import { Platform } from 'react-native';

// 比如相机组件只在原生端显示，Web端可以换成图片或者提示文本
{Platform.OS !== 'web' ? <CameraComponent /> : <PlaceholderView />}

样式方面，尽量用RN的StyleSheet，react-native-web会自动转成CSS，但原生专属属性（比如shadowColor）可能需要单独处理，或者用Web端的CSS属性补充。

5. 自定义Webpack配置（可选）

如果默认配置满足不了你的需求（比如要加自定义loader、优化打包体积），可以在项目根目录创建webpack.config.js：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      // 可选：指定要转译的模块，避免编译错误
      babel: {
        dangerouslyAddModulePathsToTranspile: ['react-native-web']
      }
    },
    argv
  );

  // 在这里修改config，比如添加别名、自定义插件等
  // 示例：给assets目录加别名
  config.resolve.alias['@assets'] = path.resolve(__dirname, 'assets');

  return config;
};