介绍
React Native 是一款流行的跨平台移动应用框架，它允许开发者用 JavaScript 和 React 来构建原生应用。其中，SVG 图像在移动端开发中广泛使用。本文将介绍一个 React Native 使用 SVG 图像的 npm 包——react-native-svg-image。
react-native-svg-image 提供了一种简单的方法来显示 SVG 图像，它可以显示 URL、基于 base64 的图像和本地 SVG 文件。它还提供了一些自定义选项，如颜色、大小、缩放等。
在本文中，我们将：
- 介绍 react-native-svg-image 的基本使用。
- 展示 react-native-svg-image 的自定义选项。
- 展示 react-native-svg-image 加载本地 SVG 文件的方法。
安装
使用 npm 安装 react-native-svg-image：
npm install react-native-svg-image
基本使用
要使用 react-native-svg-image，您需要在 React Native 项目中导入它。示例代码如下：
-- -------------------- ---- -------
------ -------- ---- -------------------------
---
-- - ------ ----- -------- --
-------- -
------ -
---------
------------- ---------------------------------
-----------
------------
--
--
-在上面的代码中，我们使用了 SvgImage 组件。该组件接受一个 source 属性，用于指定图像文件的位置。我们可以通过指定一个包含 URL 地址的 JavaScript 对象{uri: 'image_uri'}来使用远程图像。当然，我们还可以使用本地的 SVG 文件。
接下来，我们还指定了图像的宽度和高度。
自定义选项
react-native-svg-image 中有很多自定义选项，这些选项使您能够更好地控制 SVG 图像的呈现。在这里，我们将介绍一些最基本的选项。
tintColor
你可以使用 tintColor 属性，将 SVG 图形中的所有颜色设置为一种新颜色。下面是一个示例：
<SvgImage
source={{uri: 'https://example.com/image.svg'}}
width={200}
height={200}
tintColor="blue"
/>scale
你可以使用 scale 属性，将 SVG 图形的大小缩小或放大到指定比例。下面是一个示例，将 SVG 图像放大到两倍：
<SvgImage
source={{uri: 'https://example.com/image.svg'}}
width={200}
height={200}
scale={2}
/>style
如果您需要为您的 SVG 图像添加其他样式，可以使用 style 属性。该属性接受一个普通的样式对象，例如：
-- -------------------- ---- -------
----- ------ - -------------------
--------- -
------------ --
------------ ------
--
---
---------
------------- ---------------------------------
-----------
------------
-----------------------
--加载本地 SVG 文件
除了显示来自远程 URL 的 SVG 图像，react-native-svg-image 还可以加载本地 SVG 文件。下面是如何使用：
在您的 React Native 项目中创建一个名为 svg 的文件夹，在其内部添加您的 SVG 文件。例如，将 SVG 文件命名为 icon.svg。
-- -------------------- ---- -------
------ -------- ---- -------------------------
------ ------- ---- -----------------
---
-------- -
------ -
---------
------------- ---------
-----------
------------
--
--
-在上面的代码中，我们使用 import 语句导入了存储在 svg 文件夹中的 icon.svg 文件。接下来，我们通过使用 source={{svg: svgIcon}} 来将该文件传递给 <SvgImage> 组件。
结论
使用 react-native-svg-image，您可以轻松地在您的 React Native 应用程序中添加 SVG 图像。本文介绍了 react-native-svg-image 的基本用法和自定义选项，希望对您有所帮助。
完整示例代码可在作者的 GitHub repo 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562dd81e8991b448e0522