React Native SVG 在 Web 端兼容性问题分析与解决方案

2025-05-29 05:46:07作者：房伟宁

**探索无限创意空间 —— React-Native-SVG**：为你的React Native应用解锁全平台SVG魔法！无论是iOS、Android、macOS、Windows还是网页，此库让你轻松驾驭SVG元素与属性，从矩形到复杂路径，一网打尽。无需繁琐转换，直接将SVG设计活现于应用之中。简单安装，兼容广泛React Native版本，支持最新渲染系统Fabric（需0.69.0+）。遇到挑战？我们有详尽文档和贴心社区助你排忧解难。加入数千开发者行列，用React-Native-SVG释放图形设计的力量，打造视觉盛宴，无论是动态图标还是精致插图，一切尽在掌握。由软件巨匠Software Mansion维护，专业团队背后的支持，让你的创作之旅更加顺风顺水。开始你的图形革命吧！

项目地址：https://gitcode.com/gh_mirrors/rea/react-native-svg

问题背景

React Native SVG 是一个广泛使用的库，用于在 React Native 应用中渲染 SVG 图形。在 15.5.0 版本中，该库引入了一个新的依赖项 @react-native/assets-registry，这导致了一些 Web 端应用的兼容性问题。

问题分析

在 React Native SVG 15.5.0 版本中，开发团队添加了对 @react-native/assets-registry 的依赖。这个包原本是 React Native 的一个间接依赖项，但在纯 Web 应用（如使用 React Native Web 的项目）中并不存在这个依赖关系。

当开发者在 Web 环境中使用 React Native SVG 15.5.0 或更高版本时，会遇到模块找不到的错误，因为 Web 环境没有自动包含这个依赖项。这个问题特别容易出现在以下场景中：

使用 React Native Web 的项目
非 Expo 项目
纯 Web 项目（如 Next.js 应用）

解决方案

1. 安装缺失的依赖

最简单的解决方案是直接安装缺失的依赖包：

npm install @react-native/assets-registry
# 或
yarn add @react-native/assets-registry

2. Next.js 项目的特殊配置

对于 Next.js 项目，需要进行额外的 Webpack 配置来处理 Flow 类型的文件。以下是完整的配置示例：

const path = require("path");

module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        "react-native": "react-native-web",
      },
      resolveExtensions: [
        ".web.js",
        ".web.jsx",
        ".web.ts",
        ".web.tsx",
        ".mdx",
        ".tsx",
        ".ts",
        ".jsx",
        ".js",
        ".mjs",
        ".json",
      ],
    },
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      include: [
        path.resolve(__dirname, "src"),
        path.resolve(
          __dirname,
          "node_modules/@react-native/assets-registry/registry"
        ),
      ],
      use: {
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          presets: ["module:metro-react-native-babel-preset"],
          plugins: ["react-native-web"],
        },
      },
    });
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      "react-native$": "react-native-web",
    };
    config.resolve.extensions = [
      ".web.js",
      ".web.jsx",
      ".web.ts",
      ".web.tsx",
      ...config.resolve.extensions,
    ];
    return config;
  },
};