react-native-svg 是一个 React Native 的库,允许你在 React Native 应用程序中使用 SVG(可缩放矢量图形)来绘制复杂的图形和图标。由于原生的 React Native 不支持 SVG 图像,react-native-svg 提供了一种方式来使用矢量图形,这些矢量图形可以在不同的屏幕分辨率上很好地缩放而不会失真。

使用 react-native-svg,你可以在应用中直接写入 SVG XML 代码,或者使用库提供的组件(如 Svg, Circle, Rect, Path, G, Text 等)以声明性的方式构建矢量图形。这些组件对应于SVG的标签,使得在React Native中绘制SVG元素变得与在Web上编写SVG一样简单和直观。

例如,使用 react-native-svg,你可以创建一个圆形:

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

...

<Svg height="100" width="100">
  <Circle cx="50" cy="50" r="50" fill="blue" />
</Svg>

上面的代码将绘制一个半径为50、填充颜色为蓝色的圆形。

由于 react-native-svg 是一个独立的库,你需要在使用之前安装它,通常是使用 npm 或 yarn:

npm install react-native-svg

yarn add react-native-svg

此外,你可能还需要进行额外的配置步骤,例如链接原生代码依赖等,这取决于你使用的 React Native 的版本和目标平台。