React Native 是一种使用 JavaScript 构建原生应用的框架，它允许开发人员快速构建跨平台移动应用程序。然而，React Native 并没有内置对 SVG 文件的支持，这使得在 React Native 中使用 SVG 图形变得有些棘手。
为了解决这个问题，社区中出现了很多 React Native SVG 库，其中 react-native-svg-uri-n 是其中之一。它是一个简单易用的库，可以让我们很容易地在 React Native 应用中渲染 SVG 图形，接下来我们就来学习如何使用它。
第一步：安装
首先，我们需要使用 npm 或者 yarn 安装 react-native-svg-uri-n。你可以通过下面的命令来安装：
npm install react-native-svg-uri-n
或者
yarn add react-native-svg-uri-n
第二步：导入
安装完成后，我们需要在我们的组件中引入 react-native-svg-uri-n：
import SvgUri from 'react-native-svg-uri-n';
第三步：使用
安装并导入完成后，我们现在可以开始使用 react-native-svg-uri-n 来渲染 SVG 图形了。以下是一个展示 SVG 图形的简单示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ------ ---- -------------------------
----- ----------- - -- -- -
------ -
------
-------
-----------
------------
------------------------------------------------------------------
--
-------
--
--
------ ------- ------------在这个例子中，我们创建了一个简单的组件，将一个 SVG 图形渲染出来。我们使用了 source 属性来指定 SVG 文件的 URL，同时也可以指定 SVG 图形的 width 和 height 属性。
进阶使用
除了基本的用法外，react-native-svg-uri-n 还提供了一些高级选项来帮助我们更好地控制 SVG 图形的渲染。以下是一些常用的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ------ ---- -------------------------
----- ----------- - -- -- -
------ -
------
--- ---- --- -- ---
-------
-----------
------------
--------------------------------------
--
--- ----- --- -- ---
-------
-----------
------------
---------------- ------------------------------------------ -------- ------- ------ -------------- ---------------- ---------- ---------
--
--- -- --- ----- ---
-------
-----------
------------
------------------------------------------------------------------
-----------
--
-------
--
--
------ ------- ------------在上面的示例中，我们展示了一些常用的高级选项。我们可以根据需要选择这些选项来控制 SVG 图形的渲染，使我们的应用程序更加灵活和易于管理。
总结
通过使用 react-native-svg-uri-n，我们可以更方便地在 React Native 中渲染 SVG 图形。这个库的使用非常简单，同时还提供了一些高级选项来满足我们在渲染 SVG 图形方面的需求。
如果你正在学习 React Native，并且需要在你的应用程序中使用 SVG 图形，那么 react-native-svg-uri-n 就是一个值得尝试的库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d7181e8991b448db324