expo-linear-gradient

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

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

インストール
例
APIリファレンス
- コンポーネント
  - LinearGradientのプロパティ
サポートされているバージョン
関連リソース

インストール

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色が必要です（単色の背景には、`View`コンポーネントの`style.backgroundColor`プロパティを使用してください）。
`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