如何在React项目中使用React Native npm包？遇引用报错求解决方案

核心问题解答 #

React Web项目可以部分兼容React Native的npm包，但不能直接照搬原生RN包，需要通过react-native-web这类工具做环境适配。你遇到的"react is not defined"报错，主要是webpack配置和依赖解析逻辑导致的。

报错原因分析 #

1. webpack配置里externals: {"react-native": true}的设置，会让webpack跳过react-native模块的打包，转而期望全局存在该变量，但浏览器环境没有这个全局变量，导致依赖RN的包（比如react-native-extended-stylesheet）无法正确加载依赖。
2. babel-loader排除了所有node_modules目录，导致RN相关包没被转译，语法或依赖引入方式不兼容Web环境。
3. 安装了多个仅适用于RN原生环境的包（如react-native-html-to-pdf），这些包在Web环境下无法运行，反而增加依赖冲突。

具体修复步骤 #

1. 调整webpack配置 #

• 移除externals中的"react-native": true配置项，让webpack正常处理RN相关依赖。
• 添加react-native-web的别名，让webpack加载Web兼容版的RN模块：

resolve: {
  alias: {
    'react-native': 'react-native-web', // 新增该行
    stream: "stream-browserify",
    zlib: "browserify-zlib"
  },
  // 保留原有的fallback配置
}

• 修改babel-loader规则，允许转译RN相关包：

{
  test: /\.?js$/,
  // 排除node_modules，但不排除RN相关的包
  exclude: /node_modules(?!\/react-native-extended-stylesheet|\/react-native-web)/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react']
    }
  }
}

2. 安装必要适配依赖 #

安装react-native-web提供Web环境的RN核心API：

npm install react-native-web --save

3. 清理无效依赖 #

卸载仅适用于RN原生环境的包，避免冲突：

npm uninstall react-native-html-to-pdf react-native-webview react-native-htmlview react-native-render-html

4. 正确使用EStyleSheet #

在项目入口文件（如src/index.js）初始化EStyleSheet，设置rem基准：

import EStyleSheet from 'react-native-extended-stylesheet';

// 初始化，设置rem基准值（比如以16px为1rem）
EStyleSheet.build({
  $rem: 16,
});

之后就可以用EStyleSheet编写支持rem的样式：

const styles = EStyleSheet.create({
  container: {
    padding: '1rem',
    fontSize: '0.875rem',
  },
});

额外注意事项 #

• 不是所有RN包都能通过react-native-web适配，使用前先查看包的文档是否支持Web环境。
• react-pdf本身有Web端的使用方案，优先使用其Web原生的样式配置方式，必要时再结合RN适配工具。

内容的提问来源于stack exchange，提问作者Nazar Y