如果你开始在 React Native 项目中使用 SVG，你可能会发现它并不像在 Web 开发中那么容易。幸运的是，有一些工具可以帮助我们解决这些问题，其中一个是 @hitbit/expo-svg-transformer 这个 npm 包。本文将详细介绍如何使用它。
安装
首先要确保你的项目使用了 Expo，然后安装 @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 文件，它的内容如下：
---- ---------------------------------- ---------- - -- --- ---------- ------------
-----
--------------
----------------------------------------------------------------------------------------------
-----------------------------------------------------
--
------我们现在可以引用它：
------ ----- ---- -------- ------ - ------ - ---- ------------------- ------ ----- ---- -------------- ----- --------- - -- -- ------- ----------- --- ------ ------- ----------
如上，我们引入了一个名为 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