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

百变鹏仔 3天前 #JavaScript

文章标签文件

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

好处

分步安装和配置

第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 = (() =&gt; {  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) =&gt; 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) =&gt; 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 () =&gt; {  const {    resolver: { sourceexts, assetexts }  } = await getdefaultconfig();  return {    transformer: {      babeltransformerpath: require.resolve(        "react-native-svg-transformer/react-native"      )    },    resolver: {      assetexts: assetexts.filter((ext) =&gt; ext !== "svg"),      sourceexts: [...sourceexts, "svg"]    }  };})();

使用 expo 模块响应本机项目

对于使用 expo 模块而没有 expo-cli 的项目，您可能需要调整 transformer 路径以正确使用 react native 的 transformer：

-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;}</svgprops>

用法

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

示例：

导入 svg 文件：
```
import logo from "./logo.svg";
```
使用 svg 作为组件：
```
<Logo width={120} height={40} />
```

其他资源

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

关注我看更多文章！

文章推荐

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

好处

分步安装和配置

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

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

第 3 步：配置 react native 打包器

对于 expo sdk v41.0.0 或更高版本

对于 react native v0.72.1 或更高版本

对于 react native v0.59 或更高版本

使用 expo 模块响应本机项目

使用 typescript

用法

其他资源

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？