npm 包 react-native-svg 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在 React Native 中，可以使用 react-native-svg 包来实现 SVG（可缩放矢量图形）的绘制和操作。SVG 是基于 XML 的一种矢量图形格式，可以实现非常丰富的图形效果，而且可以无损缩放。在移动端开发中使用 SVG，可以减小图片资源的大小，同时也更加灵活。

本文将介绍 react-native-svg 的使用方法，包括安装、基本用法、图形绘制等内容，希望对正在学习 React Native 的开发者有所帮助。

安装

使用 npm 安装 react-native-svg 包：

npm install react-native-svg --save

注意：在使用 react-native-svg 之前，需要先安装好 React Native 的环境，并且按照官方文档的要求进行一些配置工作。

使用教程

基本用法

可以使用 Svg 和 Path 组件来绘制 SVG 图形。首先，需要导入 Svg 和 Path 组件：

import Svg, { Path } from 'react-native-svg';

然后，可以在组件中使用 Svg 和 Path 组件来绘制 SVG 图形：

<Svg width="100%" height="300">
    <Path d="M 10 10 L 100 100 L 200 10" stroke="red" fill="transparent" />
</Svg>

上面的代码中，我们使用 Svg 组件来定义一个宽度为 100%、高度为 300 的 SVG 容器，并在容器中使用 Path 组件来绘制一条从 (10, 10) 到 (100, 100) 再到 (200, 10) 的折线，颜色为红色，填充为透明。

图形绘制

react-native-svg 提供了丰富的 API，可以用来绘制包括直线、圆、矩形、多边形和路径等在内的各种图形。下面分别介绍这些图形的绘制方法。

直线

要绘制直线，可以使用 Line 组件：

<Svg width="100%" height="300">
    <Line x1="10" y1="10" x2="100" y2="100" stroke="red" strokeWidth="2" />
</Svg>

上面的代码中，我们使用 Line 组件定义一条从 (10, 10) 到 (100, 100) 的直线，颜色为红色，宽度为 2。

圆

要绘制圆，可以使用 Circle 组件：

<Svg width="100%" height="300">
    <Circle cx="100" cy="100" r="50" stroke="red" fill="yellow" strokeWidth="2" />
</Svg>

上面的代码中，我们使用 Circle 组件定义一个圆心坐标为 (100, 100)、半径为 50 的圆，边框为红色、填充色为黄色，宽度为 2。

矩形

要绘制矩形，可以使用 Rect 组件：

<Svg width="100%" height="300">
    <Rect x="10" y="10" width="100" height="50" stroke="red" fill="yellow" strokeWidth="2" />
</Svg>

上面的代码中，我们使用 Rect 组件定义一个左上角坐标为 (10,10)、宽度为100、高度为50 的矩形，边框为红色、填充色为黄色，宽度为 2。

多边形

要绘制多边形，可以使用 Polygon 组件：

<Svg width="100%" height="300">
    <Polygon points="10,10 50,100 100,50" stroke="red" fill="transparent" strokeWidth="2" />
</Svg>

上面的代码中，我们使用 Polygon 组件定义一个由 (10, 10)、(50, 100) 和 (100, 50) 连线组成的三角形，边框为红色、填充为透明，宽度为2。

路径

要绘制路径，可以使用 Path 组件：

<Svg width="100%" height="300">
    <Path d="M 10 10 L 100 100 L 200 10" stroke="red" fill="transparent" strokeWidth="2" />
</Svg>

上面的代码中，我们使用 Path 组件定义一条从 (10, 10) 到 (100, 100) 再到 (200, 10) 的折线，颜色为红色，填充为透明，宽度为 2。

除了上述几种基本图形之外，react-native-svg 支持还支持 SVG 的各种属性，例如 <text>, <image> 等，可根据需求灵活运用。

总结

react-native-svg 可以方便地在 React Native 中使用 SVG 图形，支持丰富的图形绘制和操作，可以降低应用的资源负担，提高用户体验。本文介绍了 react-native-svg 的基本用法和常见图形绘制方法，希望能够对开发者学习 React Native 的过程有所帮助。

示例代码

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ---- - ----- ------- ----- ----- ------- - ---- -------------------

------ ------- -------- ------------ -
    ------ -
        ----- -------- ----- -- ----------- --------- --------------- -------- ---
            ---- ------------ -------------
                ----- ------- ------- -------- -------- ------------ --------------- --
                ------- -------- ------- ------ -------------- ----------- --------------- --
                ----- ------ ------- ----------- ----------- --------------- ------------- --------------- --
                -------- -------------- ------ -------- --------------- ------------------ --------------- --
                ----- ---- --- --- - --- --- --- ---- -------------- ------------------ --------------- --
            ------
        -------
    --
-

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/react-native-svg