expo-linear-gradient - Amazon Vega Docs

Amazon Developer

Console

as

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

Ring

AWS

ドキュメント

Support

Contact Us

My Cases

Console

as

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

開発

設計と開発

公開

リファレンス

サポート

@amazon-devices/expo-linear-gradientは、複数の色を直線方向のグラデーションとして表示するネイティブReactビューを提供します。

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。該当するReact Nativeバージョンのタブを選択してください。

React Native 0.72
React Native 0.83

dependencies: {
    ...
    "@amazon-devices/expo-linear-gradient": "~2.0.0",
}

dependencies: {
    ...
    "@amazon-devices/expo-linear-gradient": "~3.0.0",
}

npm installコマンドを使用して、依存関係を再インストールします。

例

import React from 'react';
import {LinearGradient} from '@amazon-devices/expo-linear-gradient';

export const App = () => {
  return (
    <LinearGradient
      colors={['white', 'red']}
      start={[0.5, 0.5]}
      end={[1, 1]}
      style={{
        width: 100,
        maxHeight: 200,
        minHeight: 200,
        borderWidth: 1,
        marginVertical: 20,
        borderColor: 'black',
      }}
    />
  );
};

APIリファレンス

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

コンポーネント

コンポーネント	説明
`LinearGradient`	複数の色を直線方向のグラデーションとして表示するネイティブビューをレンダリングします。

LinearGradientのプロパティ

プロパティ	説明
`colors`	グラデーションのストップを表す色の配列。少なくとも2色が必要です（単色の背景には、`style.backgroundColor`コンポーネントの`View`プロパティを使用してください）。
`start`	たとえば、`x: 0.1`, `y: 0.2`は、左から10%、上から20%の位置でグラデーションが始まることを意味します。
`end`	たとえば、`x: 0.1`, `y: 0.2`は、左から10%、下から20%の位置でグラデーションが終わることを意味します。
`locations`	`0`～`1`の範囲（両端を含む）の数値を含む、colorsプロパティと同じ長さの配列。それぞれの数値は、対応する色を配置するカラーストップ位置を示します。指定しない場合、色はグラデーション全体で均等に配分されます。

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

NPMパッケージのバージョン	Vega SDKバージョン	Vega OSバージョン	React Nativeバージョン
2.0.1758683737	0.23以前	`OS 1.1 (1401010009820)`以前	0.72
3.0.0	0.24	`OS 1.2 (2101020054720)`	0.72、0.83

関連リソース

その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。

最終更新日 2026年10月26日