Console

Settings

Sign out

Notifications

Alexa

亚马逊应用商店

Ring

AWS

文档

Support

My Cases

Console

Vega开发者文档

主页

新手入门

设计和开发

应用发布

参考

支持

react-native-svg

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。

@amazon-devices/react-native-svg库为Vega上的React Native提供SVG支持，并提供网页兼容层。

@amazon-devices/react-native-svg库支持大多数 SVG 元素和属性，例如Rect、Circle、Line、Polyline、Polygon和G。这个库简单地将SVG代码转换为react-native-svg组件。

此库由系统部署，可供适用于Vega的React Native应用使用，无需单独的安装过程。此库作为自动链接库进行部署，您的应用在运行时会链接到该库。该库保证仅与为之构建的适用于Vega的React Native版本兼容。

升级应用的适用于Vega的React Native版本时，可以考虑升级其库依赖关系的最佳实践。

安装
示例
API参考
- 组件
- 触控事件
已知问题和限制
支持的版本
相关主题

安装

在package.json文件中添加JavaScript库依赖项。

复制到剪贴板。

 "dependencies": {
     ...
     "@amazon-devices/react-native-svg": "~2.0.0"
}

使用npm install命令重新安装依赖项。

示例

此示例演示了如何渲染Circle组件。

已复制到剪贴板。

import { Circle, Svg } from '@amazon-devices/react-native-svg';
import React from 'react';
import { StyleSheet, View } from 'react-native';

const CircleExample = () => {
  return (
    <Svg height="100" width="100">
      <Circle cx="50%" cy="50%" r="40%" fill="pink" />
    </Svg>
  );
};

const App = () => {
  return (
    <View style={styles.container}>
      <CircleExample />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
});

export default App;

此示例演示了如何渲染Polygon组件。

已复制到剪贴板。

import { G, Polygon, Svg } from '@amazon-devices/react-native-svg';
import React from 'react';
import { StyleSheet, View } from 'react-native';

const StarExample = () => {
  return (
    <Svg height="105" width="105">
      <G scale="0.5">
        <Polygon
          points="100,10 40,198 190,78 10,78 160,198"
          fill="lime"
          stroke="purple"
          strokeWidth="5"
        />
      </G>
    </Svg>
  );
};

const App = () => {
  return (
    <View style={styles.container}>
      <StarExample />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
});

export default App;

API参考

有关此库和API参考的信息，请参阅react-native-svg的GitHub文档页面。

Vega上的SVG库增加了对以下SVG组件和触摸事件的支持。

组件

组件	描述
`Svg`	其他元素的HOC。
`Rect`	创建矩形和矩形形状的变体。
`Circle`	创建一个圆。
`Ellipse`	创建一个椭圆。椭圆形与圆形密切相关。区别在于，椭圆形的`x`和`y`半径彼此不同，而圆形的`x`和`y`半径相等。
`Line`	一种SVG基本形状，用于创建一条连接两点的直线。
`Path`	定义路径。
`Text`	定义文本。
`TSpan`	在SVG中绘制多行文本。通过该元素可以将一行文本放置在相对前一行文本的位置，而非以绝对位置放置每一行文本。
`G`	用于对其他SVG元素进行分组的容器。
`Image`	在SVG组件中包含栅格图像。
`ClipPath`	定义剪辑路径。
`Use`	重用SVG文档中其他位置的SVG形状。
`Defs`	嵌入可在SVG图像内重复使用的定义。
`RadialGradient`	定义径向渐变。该元素必须嵌套在`<Defs>`标签中。
`LinearGradient`	定义线性渐变。该元素必须嵌套在`<Defs>`或`<Svg>`标签中。
`Mask`	指定任何其他图形对象或`G`元素用作alpha蒙版，将当前对象合成到背景中。

触控事件

事件
`disabled`
`onPress`
`onPressIn`
`onPressOut`
`onLongPress`
`delayPressIn`
`delayPressOut`
`delayLongPress`

已知问题和限制

不支持的API

Vega目前不支持以下组件/属性。

Markers
TouchEvents
Pattern和patternTransform

不支持的组件

Vega目前不支持以下SVG组件。

组件	描述
`Polygon`	创建包含至少三条边的图形。多边形由直线组成，形状是“封闭的”（所有线条都相连）。
`Polyline`	创建仅由直线组成的形状。
`TextPath`	沿元素的形状放置文本。要指定哪个文本块，请将文本包含在元素中，该元素包含一个引用元素的`href`属性。
`Symbol`	定义可重用的符号。
`Pattern`	使用预定义图形对象的图案填充或描边对象。可以按`x`和`y`的固定间隔复制（“平铺”）图案，以覆盖绘制区域。
`Marker`	附加到`path`、`line`、`polyline`和`polygon`元素的一个或多个顶点的符号。标记用于制作箭头或多点标记。
`ForeignObject`	在非SVG命名空间中包含元素，该命名空间使用其他用户代理进程在SVG图形的某个区域内渲染。

支持的版本

程序包名称	亚马逊NPM库版本	Vega OS内部版本号	Vega SDK版本	发行说明
`@amazon-devices/react-native-svg`	2.1.0+13.14.0	`OS 1.1 (201010438050)`	0.20

有关其他库的更多信息，请参阅支持的第三方库和服务。

Last updated: 2025年9月30日

react-native-svg

安装

示例

API参考

组件

触控事件

已知问题和限制

支持的版本

相关主题