Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

react-native-svg

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

@amazon-devices/react-native-svgは、Vega上のReact Nativeとウェブ用の互換レイヤーにSVGサポートを提供します。

@amazon-devices/react-native-svgは、Rect、Circle、Line、Polyline、Polygon、Gなど、SVGのほとんどの要素とプロパティをサポートしています。このライブラリを使用すると、SVGコード（英語のみ）からreact-native-svgコンポーネントへのシンプルな変換を行うことができます。

このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなくVega向けReact Nativeアプリで利用できます。これは、アプリが実行時にリンクする自動リンクライブラリとしてデプロイされます。ライブラリと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リファレンス

このライブラリの情報、APIリファレンス、その他の詳細については、GitHub（英語のみ）で専用のドキュメントページを参照してください。

VegaのSVGライブラリは、以下に示すSVGコンポーネントとタッチイベントのサポートを追加します。

コンポーネント

コンポーネント	説明
`Svg`	ほかの要素のためのHOC。
`Rect`	四角形や四角形のバリエーションを作成します。
`Circle`	円を作成します。
`Ellipse`	楕円を作成します。楕円は円と密接に関係しています。相違点として、楕円ではX半径とY半径が互いに異なるのに対し、円ではX半径とY半径が等しくなります。
`Line`	SVGの基本図形です。2点を結ぶ線を作成します。
`Path`	パスを定義します。
`Text`	テキストを定義します。
`TSpan`	SVGで複数行のテキストを描画します。テキストの各行を絶対位置で配置しなくても、前の行に合わせて相対的に配置できます。
`G`	ほかのSVG要素をグループ化するために使用されるコンテナです。
`Image`	ラスター画像をSvgコンポーネントに含めることができます。
`ClipPath`	クリッピングパスを定義します。クリッピングパスは、clipPathプロパティを通じて使用／参照されます。
`Use`	SVGドキュメント内のほかの場所にあるSVG図形を再利用できます。
`Defs`	SVG画像内で再利用できる定義を埋め込みます。
`RadialGradient`	放射グラデーションを定義します。この要素は`<Defs>`タグ内に入れ子にする必要があります。
`LinearGradient`	線形グラデーションを定義します。この要素は、`<Defs>`タグまたは`<Svg>`タグ内に入れ子にする必要があります。
`Mask`	SVGでは、現在のオブジェクトを背景に合成するためのアルファマスクとして、ほかの任意のグラフィックオブジェクトまたは`G`要素を使用するように指定できます。

タッチイベント

イベント
`disabled`
`onPress`
`onPressIn`
`onPressOut`
`onLongPress`
`delayPressIn`
`delayPressOut`
`delayLongPress`

Vegaでの例外

サポートされていないAPI

以下のAPIは、Vegaでは現在サポートされていません。

次のSVGコンポーネントは機能しません。
- Marker
- TouchEvent
- PatternとpatternTransformはまだサポートされていません

サポートされていないコンポーネント

以下の表に示すSVGコンポーネントは、Vegaでは現在サポートされていません。

コンポーネント	説明
`Polygon`	3つ以上の面を含むグラフィックを作成します。ポリゴンとは、直線で構成される「閉じた」（すべての線がつながっている）図形です。
`Polyline`	直線だけで構成される任意の図形を作成します。
`TextPath`	SVGには、直線状に描画されるテキストのほかに、要素の形状に沿ってテキストを配置する機能も含まれています。テキストブロックが要素の形状に沿ってレンダリングされるようにするには、`href`属性を含む要素内に、その要素への参照と併せて指定のテクストを含めます。
`Symbol`	再利用可能なシンボルを定義します。
`Pattern`	パターンは、あらかじめ定義されたグラフィックオブジェクトを使用して、オブジェクトに塗りつぶしやストロークを適用するために使用されます。描画する領域をカバーするように、グラフィックオブジェクトをX方向とY方向に一定間隔で複製（タイル状に配置）できます。
`Marker`	マーカーとは、「path」、「line」、「polyline」、「polygon」要素の1つ以上の頂点に関連付けられるシンボルです。通常、マーカーは矢印やポリマーカーを作成するために使用されます。
`ForeignObject`	SVG以外の名前空間の要素を含めることができます。この要素は、ほかのユーザーエージェントプロセスを使用してSVGグラフィックの領域内にレンダリングされます。

サポートされているバージョン

パッケージ名	Amazon NPMライブラリのバージョン	Vega OSのビルド番号	Vega SDKバージョン	リリースノート
`@amazon-devices/react-native-svg`	2.1.0+13.14.0	`OS 1.1 (201010438050)`	0.20