使用react-native-web引入native-base组件报错：requireNativeComponent不是函数

问题场景 #

基于 react-native-web 开发的项目，从 native-base 导入 Alert 或 WarningOutlineIcon 组件时，触发如下错误。

报错信息 #

Uncaught TypeError: (0 , _reactNative.requireNativeComponent) is not a function
    at eval (NativeComponents.js:1:1)
    at ./node_modules/react-native-svg/lib/module/elements/NativeComponents.js (main.js:13358:1)
    at __webpack_require__ (main.js:20091:33)
    at fn (main.js:20303:21)
    at eval (Rect.js:1:1)
    at ./node_modules/react-native-svg/lib/module/elements/Rect.js (main.js:13418:1)
    at __webpack_require__ (main.js:20091:33)
    at fn (main.js:20303:21)
    at eval (ReactNativeSVG.js:1:1)
    at ./node_modules/react-native-svg/lib/module/ReactNativeSVG.js 

导入代码 #

import {Alert} from "native-base";

import {WarningOutlineIcon} from "native-base";

项目依赖版本 #

"react-native": "^0.70.1",
"react-native-dropdown-picker": "5.4.7-beta.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-svg": "^12.1.1",
"react-native-web": "^0.18.12",

已尝试操作 #

清理 node_modules 并重新安装 react-native-svg，问题未解决。

解决方案 #

1. 升级 react-native-svg 版本 #

当前使用的 react-native-svg@12.1.1 对 web 环境支持不完善，升级到 v13+ 版本（内置 web 端适配）：

npm install react-native-svg@latest
# 或指定稳定兼容版本
npm install react-native-svg@13.14.0

2. 配置 Webpack 适配 #

在项目的 webpack.config.js 中添加以下配置，确保 react-native-svg 指向 web 端入口：

module.exports = {
  // ...其他现有配置
  resolve: {
    alias: {
      'react-native-svg': 'react-native-svg/lib/commonjs/ReactNativeSVG.web.js',
    },
  },
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

若未安装 @svgr/webpack，先执行安装：

npm install @svgr/webpack --save-dev

3. 检查 NativeBase 兼容性 #

确保使用的 NativeBase 版本支持 react-native-web，NativeBase v3 及以上版本官方支持 web 环境，版本过低则建议升级：

npm install native-base@latest

4. 临时替代方案 #

若暂时无法升级依赖，可改用 web 原生组件替代：

• 用浏览器原生 window.alert() 替代 NativeBase 的 Alert 组件
• 直接引入本地 SVG 图标文件，而非使用 NativeBase 的 Icon 组件

内容的提问来源于stack exchange，提问作者Prapti Maheshwari