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 are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

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.