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`	定义剪辑路径。	✅ 是
`使用`	重用SVG文档中其他位置的SVG形状。	✅ 是
`Defs`	嵌入可在SVG图像内重复使用的定义。	✅ 是
`RadialGradient`	定义径向渐变。该元素必须嵌套在`<Defs>`标签中。	✅ 是
`LinearGradient`	定义线性渐变。该元素必须嵌套在`<Defs>`或`<Svg>`标签中。	✅ 是
`Mask`	指定任何其他图形对象或`G`元素用作alpha蒙版，将当前对象合成到背景中。	✅ 是
`Polygon`	创建包含至少三条边的图形。多边形由直线组成，形状是“封闭的”（所有线条都相连）。	❌ 否
`Polyline`	创建仅由直线组成的形状。	❌ 否
`TextPath`	沿元素的形状放置文本。要指定哪个文本块，请将文本包含在元素中，该元素包含一个引用元素的`href`属性。	❌ 否
`Symbol`	定义可重用的符号。	❌ 否
`Pattern`	使用预定义图形对象的图案填充或描边对象。可以按`x`和`y`的固定间隔复制（“平铺”）图案，以覆盖绘制区域。	❌ 否
`patternTransform`	用于转换图案拼贴的SVG规范。	❌ 否
`Marker`	附加到`path`、`line`、`polyline`和`polygon`元素的一个或多个顶点的符号。标记用于制作箭头或多点标记。	❌ 否
`ForeignObject`	在非SVG命名空间中包含元素，该命名空间使用其他用户代理进程在SVG图形的某个区域内渲染。	❌ 否

触控事件

Event	支持
`disabled`	❌ 否
`onPress`	❌ 否
`onPressIn`	❌ 否
`onPressOut`	❌ 否
`onLongPress`	❌ 否
`delayPressIn`	❌ 否
`delayPressOut`	❌ 否
`delayLongPress`	❌ 否

支持的版本

程序包名称	亚马逊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参考

组件

触控事件

支持的版本

相关主题