画面が平らで未完成のように見え、背景やボタンが実際の製品のように感じたい場合は、どちらか状況に遭遇したかもしれません。既にReact Nativeのグラデーションを追加した場合は、設定の迷いの中に囚われています。半分の例ではExpoを使用し、もう半分ではネイティブプロジェクトを想定しているからです。
ほとんどのチュートリアルは、この分岐点で有効性を失います。コンポーネント__CAPGO_KEEP_0__は単純です。環境の選択はそうではありません。Cleanな線形グラデーションReact Nativeの設定は、環境の選択に依存しません。
That split is where most tutorials stop being useful. The component API is simple. The environment choice isn’t. A clean linear gradient React Native setup depends less on the colors プロパティやその他の設定は、Expo管理のワークフロー内にいるか、ネイティブリンク、ポッド、テストモックを自分で管理しているかによって異なります。
目次
- あなたのReact Nativeアプリにグラデーションが必要な理由
- ExpoとBare React Nativeのセットアップの選択
- UI要素用の基本的なグラデーションテクニック
- アニメーションでグラデーションを生き生きとさせる
- パフォーマンス、利用可能性、プラットフォームの特徴
- トラブルシューティングと最終的なベストプラクティス
なぜReact Nativeアプリにグラデーションが必要なのか
多くのモバイルUIは同じ理由で失敗する。レイアウトは良好、スペースは良好、フォントは受け入れられるが、画面はまだ死んでいる。Solid fillsはすべてのものがプレースホルダーに見えるように見えるが、視覚システムが多くの作業をしている場合にのみ。
A linear gradient React Native component fixes that with very little code. It adds depth, creates separation between sections, and gives high-priority elements a clear visual weight. A good gradient background can make a login screen feel intentional. A good gradient button can make the primary action obvious without resorting to heavy shadows or overly loud borders.
A linear gradient React Nativecomponent By.
2019年、expo-linear-gradientとreact-native-linear-gradientはReact Nativeプロジェクトの42%以上で登場した
- , このReact Native グラデーション採用の記事
- What gradients do well Primary CTAs、onboarding カード、そしてヘローヘッダーは視覚的なノイズを追加せずに目立つ。
- イメージアセットを置き換えます: 多くの場合、グラデーションは背景画像を追加せずにポリッシュを与えることができます。
実用的なルール: 階層が重要な場合、グラデーションを使用します。背景、ヘローカード、CTA サーフェイス、メディア オーバーレイが最も利益を受けます。フォーム フィールド、密集したリスト、ボディ コピー コンテナは通常、ありません。
製品デザインの観点からも、この点は重要です。プラットフォームをまたいだチームは、既にインターフェイスを一貫性のあるものにするために時間を費やしています。そうしたスタックがあなたのものであれば、これらの クロスプラットフォーム UI と UX の実践を、モバイル アプリケーションで使用することができます。 画面サイズが異なるスクリーンで、視覚システムが維持されるように、より多くの再利用可能なサーフェイス、そしてアセットが少ないことが大切です。
Capgo を使用して、Expo と Bare React Native のセットアップを選択します:
このフォークが最も多くの痛みを引き起こすのは、レンダリング API が両方のライブラリでほぼ同じに感じられるからです。セットアップは異なります。
Expo で管理されているアプリケーションを使用している場合は、を使用してください。 expo-linear-gradientBare React Native アプリケーションを使用している場合は、を使用してください。 react-native-linear-gradient. __CAPGO_KEEP_0__をぼかすことは、正確に何をしているのかわかっている場合にのみ試みてください。
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の開発用クライアントを使用してカスタムネイティブ機能を使用します。 bare React Nativeのセットアップ
bare React Nativeは、直接ネイティブモジュールにアクセスできますが、粗いエッジを所有することになります。
パッケージをインストールします。
Expoは、迅速なセットアップ、合理的なデフォルト値、ネイティブエッジの数を減らしたい場合に最適な選択です。そのため、チームは、Expoの高度なワークフローを探索することが多く、管理されたパスがアプリのニーズを満たさなくなった場合にのみ
npm install react-native-linear-gradientiOS用の場合、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%がネイティブモジュールの失敗を含んでいます。bare React Native設定の場合、, そして同様のソースは、JestモッキングとiOS CocoaPodsの競合についての繰り返し問題を指摘しています。Jestを使用する場合、bareアプリにモックを明示的に追加してください:
そしてJestの設定ファイルにその設定ファイルを参照してください:
// jest.setup.js
import mockRNLinearGradient from 'react-native-linear-gradient/jest/linear-gradient-mock';
jest.mock('react-native-linear-gradient', () => mockRNLinearGradient);bare React Nativeはグラデーションでうまく動作します。ただし、不完全な設定を許容しません。ほとんどの失敗は視覚的なバグではありません。リンク、Pods、またはテスト環境の問題です。
module.exports = {
preset: 'react-native',
setupFiles: ['<rootDir>/jest.setup.js'],
};実用的な決定表:
プロジェクトのタイプ
| __CAPGO_KEEP_0__ | ライブラリ | 最適な選択 |
|---|---|---|
| Expo管理アプリ | expo-linear-gradient |
__CAPGO_KEEP_0__ |
| React Nativeの基本的なアプリ | react-native-linear-gradient |
フルネイティブの制御 |
| Jestとプラスモックのある基本的なアプリ | react-native-linear-gradient __CAPGO_KEEP_0__ |
テストの安定性を維持するために必要 |
UI要素のグラデーションテクニック
同じ小さなグラデーションパターンを繰り返し使用するのが一般的なアプローチです。背景。ボタン。ヘッダー。3つが固定的であれば、多くの画面で再利用できます。
A useful mental model is this:
colors__CAPGO_KEEP_0__を制御しますstartとend__CAPGO_KEEP_1__の方向を制御しますlocations__CAPGO_KEEP_2__が起動するときのトランジションを制御します
背景のグラデーション
これは最もシンプルで再利用可能なパターンです。
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 }} __CAPGO_KEEP_3__と__CAPGO_KEEP_4__は、画面が主に装飾的な場合のデフォルトの値です。 end={{ x: 1, y: 1 }} __CAPGO_KEEP_5__
色を孤立して選択しないでください。実際のテキスト、アイコン、ステータス バーのスタイルの後ろでテストしてください。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 色の占有率が異なる場合、視覚的なスペースを占める色を1つだけにすることが最も重要です。ブレンドが汚れている場合は、色の数を減らしてみましょう。通常、デザインを修正するのに役立ちます。
グラデーションをアニメーションで活性化する
静的なグラデーションはポリッシュを与えます。アニメーションされたグラデーションはフィードバックを与えます。
最も実用的な使い方は、目立つ背景ではありません。シッパー ローダーです。ユーザーにアプリがアクティブで、データが流れてきて、表示されているレイアウトが意図的なものであることを示します。
シャイマーコンポーネントは、他のモーションパターンと相性が良く、 CapacitorのLottie in React Nativeガイド このガイドは、グラデーションシャイマーが十分か、より豊かなアニメーションアセットが必要かを判断するのに役立ちます。
nativeな感じのシャイマーローダー
最も信頼できるバージョンは、 react-native-reanimated グラデーションを動かすために、クリップしたプレースホルダーの上を動くバンドを作成します。
Capacitorに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はまだシンプルに見えますが、レンダリングの挙動、読みやすさ、プラットフォームの一貫性は、初期の効果よりも重要になります。
あなたがアプリの反応性をより広く向上させる場合 モバイルアプリパフォーマンス最適化ガイド __CAPGO_KEEP_0__
パフォーマンスチェックリスト
ネイティブのグラデーションは一般的に効率的ですが、まだ誤用することができます。
- 大きな装飾画像よりもグラデーションを優先してください: これらは、複数の画面サイズに適応するために、より簡単に送信および適応できることがよくあります。
- 多数のフルスクリーンレイヤーを積み重ねないようにしてください: 1 つの背景グラデーションは問題ありません。重なり合う半透明グラデーションにブラーを加えて、重いアニメーションを含む複数の重なり合うグラデーションは高価になります。
- 再利用可能なコンポーネントをメモ化してください: リスト内でグラデーションカードが使用されている場合、プロパティを安定させて、無関係な親ステートによって再レンダリングしないようにしてください。
グラデーションは構造的なもので、過剰なものではありません。表面を定義するために使用し、密集されたフィード内の各行には使用しないようにしてください。
アクセシビリティチェックリスト
グラデーションは、表面上のcontrastの変化により、読みやすさを損なう可能性があります。
- 最も明るいエリアでテストテキストを確認します。 白のテキストが暗いブレンドの片側でしか機能しない場合、機能しません。
- 必要に応じて、スクリムを追加します。 背景とテキストの間の微妙な暗いオーバーレイは、パレット全体を変更するのではなく、よくありません。
- 大きな表示コピー用にグラデーションテキストを予約します。 見栄えがいいのであれば、ヘッダーでは良いでしょう。小さなラベル、ヘルプテキスト、タスクを完了するために必要なものなど、重要なものではありません。
グラデーションで最も悪いケースのポイントを確認するのではなく、最も美しいポイントを確認します。
プラットフォームの特性のチェックリスト
iOSとAndroidは、通常は同じグラデーションを近くレンダリングしますが、完全に正確ではありません。
| 問題 | 通常、問題を解決するのに役立ちます |
|---|---|
| プラットフォーム間でグラデーションが異なるように見えます | より少ない色数と、グラデーションの停止間の明確なコントラストを使用してください |
| 丸角がグラデーションをクリップしないようにしてください | Put overflow: 'hidden' __CAPGO_KEEP_0__ |
| グラデーションが全く表示されない | 幅、高さ、または flex: 1 __CAPGO_KEEP_0__ |
最初に
ステータスバーとセーフエリアの扱いも確認してください。シミュレーターでバランスがとれるグラデーションは、ノッチがあるデバイスではコンテンツと背景がその余白を考慮していない場合、上向きに感じることがあります。
トラブルシューティングと最終的なベストプラクティス
- プロジェクトノートに残す短いバージョンです。
expo-linear-gradientExpo管理アプリ用react-native-linear-gradientバレのReact Native用 - グラデーションを意図的に使用する 背景、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 チームに制御されたライブ更新、ロールアウトチャネル、ロールバック保護、リリースの可視性を提供する。デプロイメントプロセスをブラックボックスに変える必要はありません。
