react-native-svg - Amazon Vega Docs

@amazon-devices/react-native-svg库为Vega上的React Native提供SVG支持，并提供网页兼容层。 @amazon-devices/react-native-svg库支持大多数SVG元素和属性，例如Rect、Circle、Line、Polyline和G。这个库简单地将SVG代码转换为react-native-svg组件。此库由系统部署，可供适用于Vega的React Native应用使用，无需单独的安装过程。此库作为自动链接库进行部署，您的应用在运行时会链接到该库。该库保证仅与为之构建的适用于Vega的React Native版本兼容。升级应用的适用于Vega的React Native版本时，可以考虑升级其库依赖关系的最佳实践。

安装

在package.json文件中添加JavaScript库依赖项。选择适用于您的React Native版本的选项卡。

React Native 0.72
React Native 0.83

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

"dependencies": {
    ...
    "@amazon-devices/react-native-svg": "~3.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;

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`	定义剪辑路径。
`Use`	重用SVG文档中其他位置的SVG形状。
`Defs`	嵌入可在SVG图像内重复使用的定义。
`RadialGradient`	定义径向渐变。该元素必须嵌套在标签中。
`LinearGradient`	定义线性渐变。该元素必须嵌套在或标签中。
`Mask`	指定任何其他图形对象或`G`元素用作alpha蒙版，将当前对象合成到背景中。

触控事件

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

Vega上的例外情况

不支持的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 SDK版本	Vega OS版本	React Native版本
~2.0.x+13.14.0	0.23及更早版本	`OS 1.1 (1401010009820)`及更早版本	0.72
~3.0.x+15.11.1	0.24	`OS 1.2 (2101020054720)`	0.72、0.83

其他资源

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

​安装

​示例

​API参考

​组件

​触控事件

​Vega上的例外情况

​支持的版本

​其他资源

安装

示例

API参考

组件

触控事件

Vega上的例外情况

支持的版本

其他资源