as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート

expo-linear-gradient

expo-linear-gradient

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

インストール

  1. package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

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

     dependencies: {
         ...
         "@amazon-devices/expo-linear-gradient": "~2.0.0",
     }
    
  2. 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 01の範囲(両端を含む)の数値を含む、colorsプロパティと同じ長さの配列。それぞれの数値は、対応する色を配置するカラーストップ位置を示します。指定しない場合、色はグラデーション全体で均等に配分されます。

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

パッケージのバージョン ベース @amazon-devices/react-native-kepler version
2.0.x 12.6.0 2.0.x

関連リソース

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


Last updated: 2025年9月30日