expo-linear-gradient
expo-linear-gradient
オープンベータ版ドキュメント:本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。
@amazon-devices/expo-linear-gradientは、複数の色を直線方向のグラデーションとして表示するネイティブReactビューを提供します。
インストール
package.jsonファイルにJavaScriptライブラリの依存関係を追加します。dependencies: { ... "@amazon-devices/expo-linear-gradient": "~2.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プロパティと同じ長さの配列。それぞれの数値は、対応する色を配置するカラーストップ位置を示します。指定しない場合、色はグラデーション全体で均等に配分されます。 |
サポートされているバージョン
| パッケージのバージョン | ベース | @amazon-devices/react-native-kepler version |
|---|---|---|
| 2.0.x | 12.6.0 | 2.0.x |
関連リソース
その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。
Last updated: 2025年9月30日

