react-native-svg

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

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

安装

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

API

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

Svg

一组绘图原语，例如 Circle、Rect、Path、ClipPath 和 Polygon。它支持大多数 SVG 元素和属性。 其实现由 react-native-svg 提供，文档也位于该仓库中。

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>
  );
}

提示

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

• 在找 SVG 吗？试试 noun project。
• 使用 Figma 可以免费创建或修改你自己的 SVG。
• 使用 SVGOMG 优化你的 SVG。这会让代码更小，也更易于处理。请务必不要移除 viewbox，以便在 Android 上获得最佳效果。
• 使用 SVGR 在浏览器中将你的 SVG 转换为 Expo 组件。

了解更多