react-native-svg

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

安装

🌐 Installation

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 提供，文档也在该仓库中提供。

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

提示

🌐 Tips

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

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

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

了解更多

🌐 Learn more