svg

允许在你的应用中使用 SVG 的库。

该库在 Expo SDK 参考中列出，因为它包含在 Expo 中。你可以将你选择的任何库与 开发构建 一起使用。

react-native-svg 允许你在应用中使用 SVG，并支持交互性和动画。

¥**react-native-svg** allows you to use SVGs in your app, with support for interactivity and animation.

安装

¥Installation

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

API

import * as Svg from 'react-native-svg';

Svg

一组绘图基元，例如 Circle、Rect、Path、ClipPath 和 Polygon。它支持大多数 SVG 元素和属性。该实现由 react-native-svg 提供，并且该存储库中提供了文档。

¥A set of drawing primitives such as Circle, Rect, Path, ClipPath, and Polygon. It supports most SVG elements and properties. The implementation is provided by react-native-svg, and documentation is provided in that repository.

import * as React from 'react';
import Svg, { Circle, Rect } from 'react-native-svg';

export default function SvgComponent(props) {
  return (
    <Svg height="50%" width="50%" viewBox="0 0 100 100" {...props}>
      <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
      <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />
    </Svg>
  );
}

专业提示

¥Pro tips

这里有一些有用的链接，可以帮助你快速行动！

¥Here are some helpful links that will get you moving fast!

• 正在寻找 SVG？试试 名词 项目。

  ¥Looking for SVGs? Try the noun project.

• 使用 菲格玛 免费创建或修改你自己的 SVG。

  ¥Create or modify your own SVGs for free using Figma.

• 使用 SVGOMG 优化你的 SVG。这将使代码更小并且更易于使用。为了在 Android 上获得最佳效果，请务必不要删除 viewbox。

  ¥Optimize your SVG with SVGOMG. This will make the code smaller and easier to work with. Be sure not to remove the viewbox for best results on Android.

• 使用 反应 SVGR 将你的 SVG 转换为浏览器中的 Expo 组件。

  ¥Convert your SVG to an Expo component in the browser using React SVGR.