react-linear-gradient

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

@amazon-devices/react-linear-gradientは、React Nativeアプリに<LinearGradient>コンポーネントを提供するreact-native-linear-gradient（英語のみ）をVegaでサポートします。

このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなくVega向けReact Nativeアプリで利用できます。これは、アプリが実行時にリンクする自動リンクライブラリとしてデプロイされます。ライブラリとVega向けReact Nativeとの互換性は、ライブラリがターゲットとしているVega向けReact Nativeバージョンとの間でのみ保証されます。

アプリのビルドに使用しているVega向けReact Nativeのバージョンを上げる場合は、ベストプラクティスとして、依存するライブラリのバージョンも上げることをお勧めします。

このライブラリとAPIの詳細については、GitHubリポジトリにあるREADME.md（英語のみ）を参照してください。

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。
クリップボードにコピーしました。
```
"dependencies": {
   ...
   "@amazon-devices/react-linear-gradient": "~2.0.0"
}
```
npm installコマンドを使用して、package-lock.jsonファイルを再インストールします。

例

以下の例は、<LinearGradient>コンポーネントを使用してテキストのスタイルを設定する方法を示しています。

クリップボードにコピーしました。

import * as React from 'react';
import { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
import LinearGradient from '@amazon-devices/react-linear-gradient'

const styles = StyleSheet.create({
    linearGradient: {
        justifyContent:"center",
        width:500,
        height:100,
        borderRadius:5
    },
    buttonText: {
        fontSize: 18,
        fontFamily: 'Gill Sans',
        textAlign: 'center',
        margin: 10,
        color: '#ffffff',
        backgroundColor: 'transparent',
    }
});

export class LinearGradientScreen extends Component {
    render() {
        return (
            <View style={{flex:1, backgroundColor: "transparent", justifyContent:"center", alignItems: "center"}}>
                <LinearGradient
                    colors={['#4c669f', '#3b5998', '#192f6a']}
                    style={styles.linearGradient}
                >
                    <Text style={styles.buttonText}>
                        ここにテキストを表示
                    </Text>
                </LinearGradient>
            </View>
        );
    }
}

export default LinearGradientScreen;

APIサポート

コンポーネントAPI

プロパティ	説明	デフォルト
`colors`	必須。グラデーションの色を表す2つ以上のカラー値の配列です。たとえば、['red', 'blue']とすると、赤から青へのグラデーションが設定されます。	（なし）
`start`	省略可能。`{ x: number, y: number }`という形式のオブジェクトを指定します。この座標は、グラデーションの開始位置を、グラデーション全体のサイズに対する左上隅からの割合として宣言します。たとえば、`{ x: 0.1, y: 0.1 }`は、上から10%、左から10%の位置でグラデーションが始まることを意味します。	（なし）
`end`	startと同じですが、グラデーションの終了位置を表します。	（なし）
`locations`	省略可能。グラデーションの各色の停止位置を定義する数値の配列です。各要素は、colorsプロパティの同じインデックスに位置する色に対応付けられます。たとえば、[0.1, 0.75, 1]は、最初の色が0%～10%、2番目の色が10%～75%、最後に3番目の色が75%～100%の部分に適用されることを意味します。	（なし）
`useAngle`	（start／endに基づくのではなく）角度ベースの計算のオン／オフを切り替えるために使用します。	（なし）
`angle`	目的の角度（度）。	（なし）
`angleCenter`	角度の中心点（Photoshopのようにグラデーションの幅と伸びを制御します）。	（なし）

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

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

react-linear-gradient

インストール

例

APIサポート

コンポーネントAPI

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

関連リソース