如果你开始在 React Native 项目中使用 SVG，你可能会发现它并不像在 Web 开发中那么容易。幸运的是，有一些工具可以帮助我们解决这些问题，其中一个是 @hitbit/expo-svg-transformer 这个 npm 包。本文将详细介绍如何使用它。
安装
首先要确保你的项目使用了 Expo，然后安装 @hitbit/expo-svg-transformer：
npm install --save-dev @hitbit/expo-svg-transformer
配置
在项目的根目录下，创建一个 metro.config.js 文件，将下面的代码粘贴到其中：
-- -------------------- ---- ------- ----- - ---------------- - - ------------------------------ -------------- - ------ -- -- - ----- - --------- - --------- -- - - ----- ---------------------------- ------ - ------------ - --------------------- ------------------------------------------------ -- --------- - ---------- ------------------------ -- --- --- ------- ------ ------ ------- ------- -- -- -----展开代码
这个文件是用于配置 React Native Metro 的，其中有两个关键配置：
babelTransformerPath：将 SVG 转换为 React Native 可以使用的组件。因为@hitbit/expo-svg-transformer背后依赖了react-native-svg-transformer，所以需要把它们绑定到一起。assetExts：告诉 Metro 要处理哪些资源类型。
这样，你的项目就可以支持使用 SVG 了。
使用
现在，我们可以在项目中使用 SVG 了。假设我们有一个 heart.svg 文件，它的内容如下：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30"> <path fill="#FF4136" d="M19.7,3.3c-3.1,0-5.9,2-7,4.8C12.2,5.3,9.5,3.3,6.4,3.3c-4.4,0-8,3.6-8,8c0,6.8,8,11.6,15.7,20 c7.7-8.4,15.7-13.1,15.7-20C27.7,7,24.1,3.3,19.7,3.3z" /> </svg>
我们现在可以引用它：
import React from 'react'; import { SvgXml } from 'react-native-svg'; import heart from './heart.svg'; const HeartIcon = () => <SvgXml xml={heart} />; export default HeartIcon;
如上，我们引入了一个名为 SvgXml 的组件，它可以把 SVG 字符串渲染成一个 React Native 组件。
这就是使用 @hitbit/expo-svg-transformer 的基本方法。如果你想了解更多选项，可以查看它的文档。
总结
在本文中，我们介绍了如何使用 @hitbit/expo-svg-transformer 将 SVG 文件转换为 React Native 组件。现在你可以在你的项目中使用 SVG 了！
这不仅降低了开发者的工作量，同时也提升了应用程序的性能，因为可以有效地减少网络请求。希望这篇文章对你有所帮助，特别是在处理 React Native 中的 SVG 方面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/146862
