react-native-svg-transformer - 在React Native中高效导入和转换SVG图像

项目介绍：react-native-svg-transformer

React Native SVG transformer 是一个实用工具，用于在 React Native 项目中导入 SVG 文件。这种导入方式与在 Web 应用程序中使用类似于 SVGR 的库将导入的 SVG 图像转换为 React 组件的方式相同。通过这个工具，可以在 React Native 和 Web 之间复用相同的代码，这使得开发更加高效和一致。

使用方法

在 React 组件中导入 .svg 文件非常简单。以导入一个名为 Logo 的 SVG 文件为例：

import Logo from "./logo.svg";

随后，可以将图像作为组件来使用：

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

演示项目

如果想要查看实际的示例，可以参考以下两个演示项目，它们展示了如何在 iOS、Android 和 Web 上使用本工具：

react-native-svg-example
react-native-svg-expo-example

安装与配置

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

确保已经安装 react-native-svg 库。详细安装步骤请参考相关文档。

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

使用 npm 或 yarn 安装该库：

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

或

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

第三步：配置 React Native 打包器

根据使用的环境不同进行配置：

对于 Expo SDK v41.0.0 或更新版，需要配置 metro.config.js 文件。
对于 React Native v0.72.1 或更新版，同样需要配置 metro.config.js 文件。
使用 React Native v0.59 或更新版的项目，同样需要相应的配置。

与 TypeScript 配合使用

如果您的项目使用 TypeScript，需要在 declarations.d.ts 文件中添加如下声明：

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