Master Linear Gradient React Native: 美しいUI 2026

あなたは、2 つの状況のいずれかを経験したかもしれません。

画面が平らで未完成のようで、背景やボタンが実際の製品のように感じたい場合は、またはすでに React Native のグラデーションを追加したが、現在は環境の設定に迷っている場合は、

ほとんどのチュートリアルはここで有効性を失います。コンポーネント API は単純です。環境の選択はありません。 colors プロパティやその他の設定は、Expo管理のワークフローか、ネイティブリンク、ポッド、テストモックを自分で管理しているかによって異なります。

React Native アプリにグラデーションが必要な理由
- グラデーションがうまくいくこと
Expo と Bare React Native のセットアップの選択
UI 要素用の基本的なグラデーション技術
アニメーションでグラデーションを生き生きとさせる
- ネイティブなフィールを与えるシャイムローダー
- アニメーションコンポーネント
パフォーマンス、アクセシビリティ、プラットフォームの特徴
トラブルシューティングと最終的なベストプラクティス

あなたのReact Nativeアプリがグラデーションを必要とする理由

多くのモバイルUIは同じ理由で失敗する。レイアウトは問題ない、スペースは問題ない、フォントは受け入れられるが、画面はまだ死んでいる。Solid fillsはすべてのものがプレースホルダーに見えるようにする。除いて、視覚システムが多くの作業をしている場合に限り。

A 線形グラデーション React Native コンポーネントはcodeで問題を解決する。画面に深みを加え、セクション間の区別を創出し、高優先度の要素に明確な視覚的重みを与える。

By 2019年までに、expo-linear-gradientとreact-native-linear-gradientはReact Nativeプロジェクトの42%以上で使用されていた, これはグラデーションが標準的なUIツールであることを示す強い信号である。プロダクションアプリの標準的なUIツールであり、最後に追加された装飾ではない。 this React Native gradient adoption write-up.

グラデーションがうまく行っていること

深みを創造する 画面に一つの平らな背景があると、未完成のように見える。上から下へのブレンドを加えると、表面が層化されたように見える。
注意を引く Primary CTAs、onboarding カード、そしてヘローヘッダーは視覚的なノイズを追加せずに目立つ。
イメージアセットを置き換え: 多くの場合、グラデーションは背景画像を追加せずにポリッシュを与える。

実用的なルール: 階層が重要な場合、グラデーションを使用する。背景、ヘローカード、CTA 表面、メディアオーバーレイが最も利益を受ける。フォームフィールド、密集したリスト、ボディーコピーコンテナは通常、しない。

製品設計の観点からも、これは重要な点です。プラットフォームをまたがって作業するチームは、インターフェイスを一貫性を持って維持するためにすでに時間を費やしています。これらのクロスプラットフォーム UI と UX の実践は、モバイルアプリの開発に役立ちます。

アセットの数を減らし、再利用可能な表面を増やし、画面をまたがって持続可能な視覚システムを実現することができます。

This is the fork that causes most of the pain. The rendering API feels almost identical in both libraries, but setup isn’t.

これが最も多くの痛みを引き起こすフォークです。レンダリング __CAPGO_KEEP_0__ は両方のライブラリでほぼ同じように感じますが、セットアップは違います。 expo-linear-gradientExpo で管理されているアプリの場合、を使用します。 . Bare React Native アプリの場合、を使用します。 react-native-linear-gradient. __CAPGO_KEEP_0__をぼかすことは、正確な理由がわかっている場合にのみ試みてください。

Expo管理型とバレなReact Nativeワークフローの線引きを比較するインフォグラフィック。

Expo設定

Expoはより滑らかなパスです。インストールは簡単で、バージョンマッチングは自動で行われ、ネイティブリンクについて考える必要がありません。

インストール方法は次のとおりです。

npx expo install expo-linear-gradient

使用方法は次のとおりです。

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1d4ed8']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

Expoは、迅速な設定、正常なデフォルト値、ネイティブエッジの数を減らしたい場合に適しています。そのため、Expoワークフローを進化させたいチームは、 Expo開発用クライアントを使用してカスタムネイティブ機能を使用します。しかし、管理型パスがアプリのニーズを満たさなくなった場合にのみ。

バレなReact Native設定

バレなReact Nativeは、直接ネイティブモジュールにアクセスできますが、粗いエッジを所有します。

パッケージをインストールしてください:

npm install react-native-linear-gradient

iOS用の場合、Podsをインストールしてください:

cd ios && pod install

基本的な使用方法:

import React from 'react';
import { StyleSheet, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#111827', '#7c3aed']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

通常のプロジェクトではここで問題が発生します

ほとんどのチュートリアルでは、テストとネイティブ設定が欠けていることが多いです。このStack Overflowの議論のまとめによると、2024年から2025年の間にこのトピックに関するStack Overflowのスレッドの68%がネイティブモジュールの失敗に伴うバレレアクトナティブセットアップに関係している, そして同様のソースは、JestのモッキングとiOS CocoaPodsの競合問題についても繰り返し問題があると記載しています。Jestを使用する場合、バレアプリでモックを明示的に追加してください:

そしてJestの設定ファイルにその設定ファイルを参照してください:

// jest.setup.js
import mockRNLinearGradient from 'react-native-linear-gradient/jest/linear-gradient-mock';

jest.mock('react-native-linear-gradient', () => mockRNLinearGradient);

バレアクトナティブはグレードでうまく動作しますが、不完全な設定を許容しません。ほとんどの失敗は視覚的なバグではありません。リンク、Pods、またはテスト環境の問題です。

module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/jest.setup.js'],
};

実用的な決定表:

プロジェクトのタイプ

__CAPGO_KEEP_0__	ライブラリ	最適な選択
Expo管理アプリ	`expo-linear-gradient`	最速のパス、最小のセットアップ
Bare React Native アプリ	`react-native-linear-gradient`	フルネイティブ制御
Jest + モック	`react-native-linear-gradient` __CAPGO_KEEP_0__	テストの安定性を維持するために必要

UI要素のグラデーション技術の基本

一般的なアプローチは、同じ小さなグラデーションパターンを繰り返し使用することです。背景。ボタン。ヘッダー。もしもこれら3つが固いものであれば、多くの画面で再利用できます。

モダンなダッシュボードインターフェイスを表示するパソコンの画面に座っている人

便利なメンタルモデルは次のとおりです:

colors __CAPGO_KEEP_0__を制御します
start そして end 制御方向
locations __CAPGO_KEEP_0__が起動画面または導入画面でグラデーションを使用している場合、より広い起動シーケンスのパターンと組み合わせることができます。

このReact Native起動画面ガイドで説明されているフルスクリーン背景グラデーション.

これは最も単純で再利用可能なパターンです。

斜めのブレンドは、デフォルトの垂直ブレンドよりもダイナミックに感じられることが多いです。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
// For bare RN, switch to:
// import LinearGradient from 'react-native-linear-gradient';

export default function WelcomeScreen() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1e293b', '#2563eb']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={styles.container}
    >
      <View style={styles.content}>
        <Text style={styles.title}>Welcome back</Text>
        <Text style={styles.subtitle}>Your workspace is ready.</Text>
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 24,
  },
  title: {
    color: '#fff',
    fontSize: 32,
    fontWeight: '800',
    marginBottom: 8,
  },
  subtitle: {
    color: 'rgba(255,255,255,0.8)',
    fontSize: 16,
  },
});

そして start={{ x: 0, y: 0 }} は、画面が主に装飾的な場合のデフォルトの値です。 end={{ x: 1, y: 1 }} このガイドでは、

色を孤立して選択しないでください。実際のテキスト、アイコン、ステータスバーのスタイルの後ろでテストしてください。Figmaで見栄えのよいパレットは、コンテンツが上に乗ったときに即座に失敗します。

グラデーションボタンはボタンとして動作する

この一般的な間違いは、グラデーションにタッチの動作を直接追加し、無効化状態、押下反応、パディングの統一性を忘れてしまうことです。ボタンは意味を保ち、グラデーションは視覚的なレイヤーとして残してください。

import React from 'react';
import {
  Pressable,
  StyleSheet,
  Text,
  ViewStyle,
  StyleProp,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

type Props = {
  title: string;
  onPress: () => void;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
};

export function GradientButton({
  title,
  onPress,
  disabled = false,
  style,
}: Props) {
  return (
    <Pressable onPress={onPress} disabled={disabled} style={style}>
      {({ pressed }) => (
        <LinearGradient
          colors={
            disabled
              ? ['#94a3b8', '#94a3b8']
              : pressed
              ? ['#7c3aed', '#2563eb']
              : ['#8b5cf6', '#3b82f6']
          }
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.button}
        >
          <Text style={styles.label}>{title}</Text>
        </LinearGradient>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    minHeight: 52,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  label: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '700',
  },
});

ボタンでは、水平方向のグラデーションが斜めのものよりも読みやすいことが多いです。ラベルは安定し、コントロールが傾いたように感じるのを避けることができます。

グラデーションテキストにマスク

これはセットの中で最も派手なパターンであり、制限を保ったままにすると有用です。Hero タイトル、アップグレードバナー、空の状態のヘッダーは適切ですが、段落テキストではありません。

必要なのは @react-native-masked-view/masked-view.

npm install @react-native-masked-view/masked-view

次にテキストマスクを構築してください。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';
import { LinearGradient } from 'expo-linear-gradient';

export default function GradientHeadline() {
  return (
    <View style={styles.container}>
      <MaskedView
        maskElement={
          <View style={styles.maskWrapper}>
            <Text style={styles.title}>Premium analytics</Text>
          </View>
        }
      >
        <LinearGradient
          colors={['#22c55e', '#06b6d4', '#3b82f6']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          locations={[0, 0.5, 1]}
        >
          <Text style={[styles.title, styles.hiddenText]}>Premium analytics</Text>
        </LinearGradient>
      </MaskedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  maskWrapper: {
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 34,
    fontWeight: '800',
    letterSpacing: -1,
  },
  hiddenText: {
    opacity: 0,
  },
});

locations 色の占める視覚的なスペースが異なる場合、色の数を減らすことで混濁感を軽減できます。色の数を減らすことで、デザインを改善するのに時間がかかる可能性が低くなります。

グラデーションをアニメーションで活用する

静的なグラデーションはポリッシュを与えます。アニメーションされたグラデーションはフィードバックを与えます。

最も実用的な使い方は、派手な背景ではありません。シャイムローダーです。ユーザーにアプリがアクティブで、データが流れてきて、表示されているレイアウトが意図的なものであることを示します。

スマートフォンを握った手が、グラデーションデザインのモバイルバンキングアプリダッシュボードを表示しています。

シャイマーコンポーネントは、他のモーションパターンと相性が良く、 Lottie in React Native ガイドこのガイドは、グラデーションシャイマーが十分か、より豊かなアニメーションアセットが必要かを判断するのに役立ちます。

ネイティブに感じるシャイマーローダー

最もシンプルで信頼できるバージョンは、 react-native-reanimated グラデーションバンドを動かして、クリップしたプレースホルダーに表示します。

Reanimated がアプリにまだない場合は、インストールしてください。次に、 overflow: 'hidden'. 内に、左から右にグラデーションレイヤーをアニメーション化します。

import React, { useEffect } from 'react';
import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
  Easing,
} from 'react-native-reanimated';

const AnimatedView = Animated.createAnimatedComponent(View);

type Props = {
  width?: number | string;
  height?: number;
  borderRadius?: number;
  style?: StyleProp<ViewStyle>;
};

export function ShimmerPlaceholder({
  width = '100%',
  height = 16,
  borderRadius = 8,
  style,
}: Props) {
  const translateX = useSharedValue(-220);

  useEffect(() => {
    translateX.value = withRepeat(
      withTiming(220, {
        duration: 1200,
        easing: Easing.linear,
      }),
      -1,
      false
    );
  }, [translateX]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <View
      style={[
        styles.container,
        { width, height, borderRadius },
        style,
      ]}
    >
      <AnimatedView style={[styles.shimmer, animatedStyle]}>
        <LinearGradient
          colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.35)', 'rgba(255,255,255,0)']}
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.gradient}
        />
      </AnimatedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    backgroundColor: '#e5e7eb',
  },
  shimmer: {
    ...StyleSheet.absoluteFillObject,
    width: 220,
  },
  gradient: {
    flex: 1,
  },
});

この方法が機能するのは、グラデーション定義自体をアニメーション化するのではなく、静的プレースホルダー上でグラデーションレイヤーをアニメーション化しているためです。

これは、より単純で論理的に理解しやすく、通常はデバイス間で安定性が高くなります。

グラデーションアニメーションの実際の効果を視覚的に歩きながら説明します。

実装に関するいくつかの注意事項が重要です:

クリッピングを使用します: 親要素が必要です、 overflow: 'hidden'丸い角の外側にシャイムが流れ出すのを防ぐために、
バンドが狭いようにしてください: アニメーションするレイヤーが小さい方が調整しやすいです。全体の表面をアニメーションするのではなく。
スクリーンと同じベースカラーを使用します: スケルトンローダーは周囲のレイアウトに合うように、別のウィジェットのように見えなくするようにします。

アニメーショングラデーションが最も注目されるものでなければ、最も効果的です。シャイムが画面上で最も大きいものであれば、まだ多すぎます。

パフォーマンス、アクセシビリティ、プラットフォームの特性

デモ画面から実際の画面にグラデーションが移動すると、懸念事項が変わります。codeはまだシンプルに見えますが、レンダリングの挙動、読みやすさ、プラットフォームの一貫性が初期の効果よりも重要になります。

アプリの反応性をより広く向上させる場合は、このようなケースも考慮する必要があります。モバイルアプリパフォーマンス最適化ガイド同じ考え方に合致するものは、不要な作業を削減し、実機で測定し、ユーザーが最も見る表面を最適化することです。

パフォーマンスチェックリスト

ネイティブのグラデーションは一般的に効率的ですが、まだ誤用することができます。

大きな装飾画像よりもグラデーションを優先する: これらは、多くの画面サイズに適応しやすく、より簡単に配信できることが多いです。
いくつかのフルスクリーンレイヤーを重ねないようにする: 1 つの背景グラデーションは問題ありません。複数の重なり合う半透明グラデーションにブラーを加え、重いアニメーションを含むと、コストが高くなることがあります。
再利用可能なコンポーネントをメモ化する: リスト内でグラデーションカードが使用されている場合、プロパティを安定させ、親の状態とは無関係な親の状態の変更で再レンダリングしないようにする。

良いルールは、グラデーションを構造化し、過剰に使用しないことです。表面を定義するために使用し、密集したフィードの各行に使用するのではなく。

アクセシビリティチェックリスト

グラデーションは、表面全体でcontrastが変化するため、読みやすさを損なう可能性があります。

明るい部分と比較してテストテキストをテストしてください。 白のテキストが暗いブレンドの片側でしか機能しない場合、機能しません。
必要に応じてスクリムを追加してください。 背景とテキストの間の微妙な暗いオーバーレイは、パレット全体を変更するのではなく、よくありません。
大きな表示コピー用にグラデーションテキストを予約してください。 見栄えがいいのでヘッダーに使うと良いでしょうが、小さなラベル、ヘルプテキスト、またはタスクを完了するために重要なものなどは避けてください。

グラデーションで最悪のケースのポイントをチェックしてください。きれいなものではありません。

プラットフォームの特性のチェックリスト

iOSとAndroidは通常、グラデーションをほぼ同じようにレンダリングしますが、完全に正確ではありません。

問題	通常、問題を解決するのに役立ちます
__CAPGO_KEEP_0__	__CAPGO_KEEP_1__
__CAPGO_KEEP_2__	__CAPGO_KEEP_3__ `overflow: 'hidden'` コンテナに
__CAPGO_KEEP_4__	ワークフローに合ったライブラリを選択する `flex: 1` __CAPGO_KEEP_5__

プロジェクトのメモに残す簡単な説明

ワークフローに合ったライブラリを選択する

デバイスのノッチやセーフエリアの扱いにも気をつけてください。シミュレーターではバランスがとれるグラデーションが、ノッチがあるデバイスでは上部重心感を与える可能性があります。

トラブルシューティングと最終的なベストプラクティス expo-linear-gradient Expo管理アプリ用 react-native-linear-gradient バレなレアクティブ
グラデーションは意図的に使用する 背景、CTA、オーバーレイ、ヘローテキストは強力な使用例
方向を意図的に制御する ボタン用に水平、装飾用に斜め、テキスト用にマスク
コンテンツに設計する、空の状態は 実際のコピー、アイコン、ステータスバーの処理でテストする
バレなセットアップはネイティブのセットアップと同じように扱う Pods、リンク、Jestモックは省略できない詳細

3つの一般的な失敗が繰り返し発生する

グラデーションが表示されない

原因: コンポーネントには表示サイズがない。

対処法: 明示的な高さを与えるか、親要素に寸法を指定する。 flex: 1レイアウトBOXがないグラデーションは、意味のある形でレンダリングされない。

iOSビルドがインストール後に破損する

原因: Podsがインストールされていない、またはネイティブ依存グラフが同期されていない。

対処法: pod install を実行し、ビルドフォルダをクリーンする必要がある場合は、ビルドフォルダをクリーンする必要がある場合は、再ビルドする。 iosベアプロジェクトでは、パッケージインストールだけでは通常十分ではない。

ネイティブモジュールエラーでテストが失敗する

原因: Jestが実際のネイティブモジュールを読もうとしている。

対処法: react-native-linear-gradient をモックする react-native-linear-gradient/jest/linear-gradient-mock Jest セットアップファイル内で。

このガイド全体から 1 つのアイデアを残すなら、この 1 つだけ残しておけばいい: グラデーション自体は簡単だ。生産用のセットアップが主な努力だ。アプリのアーキテクチャに適したライブラリを選択したら、その後は予測可能になる。

チームがハイブリッドモバイルアプリをリリースし、JavaScript、CSS、コピー、設定、資産の更新をストアのレビュー待たずにプッシュしたい場合、 Capgo CapacitorJS と Electron チームに制御されたライブ更新、ロールアウトチャネル、ロールバック保護、リリースの可視性を提供する。デプロイメントプロセスをブラックボックスに変える必要はありません。

Master Linear Gradient React Native: Beautiful UIs in 2026

目次

あなたのReact Nativeアプリがグラデーションを必要とする理由

グラデーションがうまく行っていること

アセットの数を減らし、再利用可能な表面を増やし、画面をまたがって持続可能な視覚システムを実現することができます。

Expo設定

バレなReact Native設定

通常のプロジェクトではここで問題が発生します

UI要素のグラデーション技術の基本

これは最も単純で再利用可能なパターンです。

グラデーションボタンはボタンとして動作する

グラデーションテキストにマスク

グラデーションをアニメーションで活用する

ネイティブに感じるシャイマーローダー

グラデーションアニメーションの実際の効果を視覚的に歩きながら説明します。

パフォーマンス、アクセシビリティ、プラットフォームの特性

パフォーマンスチェックリスト

アクセシビリティチェックリスト

プラットフォームの特性のチェックリスト

ワークフローに合ったライブラリを選択する

グラデーションが表示されない

iOSビルドがインストール後に破損する

ネイティブモジュールエラーでテストが失敗する

Master Linear Gradient React Native: Beautiful UIs in 2026

目次

あなたのReact Nativeアプリがグラデーションを必要とする理由

グラデーションがうまく行っていること

アセットの数を減らし、再利用可能な表面を増やし、画面をまたがって持続可能な視覚システムを実現することができます。

Expo設定

バレなReact Native設定

通常のプロジェクトではここで問題が発生します

UI要素のグラデーション技術の基本

これは最も単純で再利用可能なパターンです。

グラデーション ボタンはボタンとして動作する

グラデーション テキストにマスク

グラデーションをアニメーションで活用する

ネイティブに感じるシャイマー ローダー

グラデーション アニメーションの実際の効果を視覚的に歩きながら説明します。

パフォーマンス、アクセシビリティ、プラットフォームの特性

パフォーマンスチェックリスト

アクセシビリティチェックリスト

プラットフォームの特性のチェックリスト

ワークフローに合ったライブラリを選択する

グラデーションが表示されない

iOSビルドがインストール後に破損する

ネイティブモジュールエラーでテストが失敗する

グラデーションボタンはボタンとして動作する

グラデーションテキストにマスク

ネイティブに感じるシャイマーローダー

グラデーションアニメーションの実際の効果を視覚的に歩きながら説明します。