Console

Settings

Sign out

Notifications

Alexa

亚马逊应用商店

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版本时，最佳实践是同时升级依赖于适用于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参考

在GitHub上查看专门的文档页面，了解有关此库、API参考等的信息。

Vega上的SVG库添加了对下面列出的SVG组件和触控事件的支持。

组件

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

触控事件

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

Vega上的例外情况

不支持的API

Vega目前不支持下面列出的API。

以下SVG组件不起作用：
- Markers
- TouchEvents
- 尚不支持Pattern和patternTransform。

不支持的组件

Vega目前不支持下表中列出的SVG组件。

组件	描述
`Polygon`	该元素用于创建包含至少三个边的图形。多边形是由直线组成的“闭合”形状（所有线条都相连）。
`Polyline`	该元素用于创建仅由直线组成的任何形状。
`TextPath`	除了以直线绘制的文本外，SVG还包括沿元素形状放置文本的功能。要指定文本块沿着元素的形状渲染，请将给定文本包含在元素中，该元素包含一个引用元素的`href`属性
`Symbol`	SVG元素用于定义可重复使用的符号。
`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日