This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

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？试试 Lucide。
• 使用 Figma 免费创建或修改你自己的 SVG。
• 使用 SVGOMG 优化你的 SVG。这会让代码更小、更易于处理。请确保不要移除 viewbox，这样在 Android 上才能获得最佳效果。
• 使用 SVGR 在浏览器中将你的 SVG 转换为 Expo 组件。

了解更多