前言
在前端开发中，我们经常使用图形图像来展示页面的各种信息。而在 React Native 中，SVG 是我们常用的图形图像，可以帮助我们轻松地展示出精美的图案。但在实际开发中，我们可能需要使用一些来自于外部的 SVG 图像，这时候就需要使用 @berndschrooten/react-native-svg-uri 这个 npm 包来实现。
@berndschrooten/react-native-svg-uri 是一个基于 React Native 的 SVG 图像展示组件。它可以从网络或本地 URI 中加载 SVG 图像，并在 React Native 应用程序中展示。本文将介绍如何使用 @berndschrooten/react-native-svg-uri。
安装
首先，我们需要通过 npm 安装 @berndschrooten/react-native-svg-uri。
--- ------- ------ ------------------------------------
使用
使用 @berndschrooten/react-native-svg-uri 非常简单，只需要按照下面的步骤操作即可。
步骤 1：导入组件
在组件需要使用 SVG 图像的文件中，导入 @berndschrooten/react-native-svg-uri。
------ ------ ---- ---------------------------------------
步骤 2：使用组件
在 render() 方法中，使用 SvgUri 组件加载 SVG 图像。下面是一个基本的用法示例：
------- ----------- ------------ -------------------------------------------- --
这个示例中，我们创建了一个 100 x 100 的 SvgUri 组件，加载了远端的一个 SVG 图像。
步骤 3：自定义样式
我们可以通过内联样式或外部样式来自定义 SvgUri 组件的样式。下面是一个使用内联样式的示例：
------- ----------- ------------ -------------------------------------------- --------------- ---- --
这个示例中，我们为 SvgUri 组件设置了一个 10px 的外边距。
步骤 4：使用本地 SVG 图像
通过 @berndschrooten/react-native-svg-uri，我们也可以加载本地的 SVG 图像。下面是一个本地 SVG 图像的示例：
------- ----------- ------------ ----------------------------- --
这个示例中，我们使用了本地的 img.svg 图像。
总结
以上就是使用 @berndschrooten/react-native-svg-uri 的教程。通过 @berndschrooten/react-native-svg-uri，我们可以轻松地在 React Native 应用程序中展示外部的 SVG 图像，让我们的应用程序更加精美。希望这篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fc181e8991b448dd14a