在 React Native 项目中导入 SVG 文件：综合指南

在 React Native 项目中使用 SVG 文件就像在 Web 应用程序中使用它们一样简单。 React-native-svg-transformer 库通过将导入的 SVG 图像转换为 React 组件来实现这一点。本指南将引导您完成在 React Native 项目中安装、配置和使用react-native-svg-transformer。

好处

• 一致性： 对 React Native 和 Web 项目使用相同的 SVG 文件。
• 灵活性：轻松导入和使用 SVG 文件作为 React 组件。

分步安装和配置

第1步：安装react-native-svg库

首先，确保您安装了react-native-svg库。该库提供了在 React Native 中渲染 SVG 图像所需的组件。

要安装，请运行：

npm install react-native-svg

或

yarn add react-native-svg

详细安装说明，请参阅react-native-svg GitHub页面。

第2步：安装react-native-svg-transformer库

接下来，安装react-native-svg-transformer库，它将把你的SVG文件转换成React组件。

要安装，请运行：

npm install --save-dev react-native-svg-transformer

或

yarn add --dev react-native-svg-transformer

第 3 步：配置 React Native 打包器

根据您的设置（Expo 或 React Native CLI），配置会有所不同。以下是不同环境的配置：

对于 Expo SDK v41.0.0 或更高版本

使用以下配置创建或更新 Metro.config.js 文件：

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

对于 React Native v0.72.1 或更高版本

使用以下配置创建或更新 Metro.config.js 文件：

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-svg-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

对于 React Native v0.59 或更高版本

使用以下配置创建或更新 Metro.config.js 文件：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve(
        "react-native-svg-transformer/react-native"
      )
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

使用 Expo 模块响应本机项目

对于使用Expo模块而不使用expo-cli的项目，您可能需要调整变压器路径以正确使用React Native的变压器：

-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/react-native")

或者，强制始终使用 Expo 的变压器：

-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/expo")

使用 TypeScript

如果您的项目使用 TypeScript，则需要声明 SVG 文件的模块。将以下内容添加到您的declarations.d.ts 文件中（如果不存在则创建它）：

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

用法

安装和配置后，您可以像任何其他组件一样在 React 组件中导入和使用 SVG 文件。

示例：

1. 导入 SVG 文件：
   

   import Logo from "./logo.svg";
   

2. 使用 SVG 作为组件：
   

   <Logo width={120} height={40} />
   

其他资源

• 演示项目：
  • react-native-svg-示例
  • react-native-svg-expo-example

---

通过遵循本指南，您应该能够将 SVG 文件无缝集成到您的 React Native 项目中，从而增强您的开发工作流程并保持不同平台之间的一致性。

关注我看更多文章！

以上是在 React Native 项目中导入 SVG 文件：综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！