react-native-svg

@amazon-devices/react-native-svgライブラリは、Vega上のReact Nativeとウェブ用の互換レイヤーにSVGサポートを提供します。 @amazon-devices/react-native-svgライブラリは、Rect、Circle、Line、Polyline、Polygon、GなどのほとんどのSVG要素とプロパティをサポートしています。このライブラリは、SVG code（英語のみ）からreact-native-svgへのシンプルな変換を行います。このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなくVega向けReact Nativeアプリで利用できます。これは、アプリが実行時にリンクする自動リンクライブラリとしてデプロイされます。このライブラリは、そのライブラリがビルドされたVega向けReact Nativeのバージョンとのみ互換性があることが保証されています。アプリのVega向けReact Nativeのバージョンをアップレベルするときは、ライブラリの依存関係をアップレベルするベストプラクティスを検討してください。

インストール

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`	2点を結ぶ線を描くSVG基本シェイプ。
`Path`	パスを定義します。
`Text`	テキストを定義します。
`TSpan`	SVGで複数行のテキストを描画します。テキストの各行を絶対的に配置する代わりに、エレメントは1行のテキストを前のテキスト行に対して相対的に配置します。
`G`	ほかのSVG要素をグループ化するために使用されるコンテナです。
`Image`	SVGコンポーネントにラスター画像を含みます。
`ClipPath`	クリッピングパスを定義します。
`Use`	SVGドキュメント内のほかの場所にあるSVG図形を再利用します。
`Defs`	SVG画像内で再利用できる定義を埋め込みます。
`RadialGradient`	放射状グラデーションを定義します。この要素はタグ内に入れ子にする必要があります。
`LinearGradient`	線形グラデーションを定義します。この要素は、タグまたはタグ内に入れ子にする必要があります。
`Mask`	現在のオブジェクトを背景に合成するためのアルファマスクとして、ほかの任意のグラフィックオブジェクトまたは`G`要素を使用するように指定します。

タッチイベント

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

既知の問題と制限事項

サポートされていないAPI 以下のコンポーネント／プロパティは、現在Vegaではサポートされていません。

Markers
TouchEvent
PatternとpatternTransform

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

コンポーネント	説明
`Polygon`	少なくとも3つの面を含むグラフィックを作成します。ポリゴンとは、直線で構成される「閉じた」（すべての線がつながっている）図形です。
`Polyline`	直線のみで構成される任意の形状を作成します。
`TextPath`	要素の形状に沿ってテキストを配置します。どのテキストブロックかを指定するには、要素への参照を含む`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

Vegaライブラリとサービス

インストール

例

APIリファレンス

コンポーネント

タッチイベント

既知の問題と制限事項

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

関連トピック

​インストール

​例

​APIリファレンス

​コンポーネント

​タッチイベント

​既知の問題と制限事項

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

​関連トピック

インストール

例

APIリファレンス

コンポーネント

タッチイベント

既知の問題と制限事項

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

関連トピック