あなたは、どちらかを経験したかもしれません。
画面が平らで未完成のようで、背景やボタンが実際の製品のように感じたい場合は、またはすでにReact Nativeのグラデーションを追加した後、半分の例がExpoを使用し、もう半分はネイティブプロジェクトを使用しているため、設定の迷いの中にいます。
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 目次
あなたのReact Nativeアプリにグラデーションが必要な理由
なぜ React Native アプリがグラデーションが必要なのか
多くのモバイル UI が同じ理由で失敗する。レイアウトは問題ない、スペースは問題ない、フォントは受け入れられるが、画面はまだ死んでいる。固形色の塗りつぶしは、すべてがプレースホルダーのように見える。残りの視覚システムが多くの作業をしている場合にのみ、異なる。
A linear gradient React Native コンポーネントは、ほとんどの code で、画面が死んでいるように見えることを直感的に感じさせる。グラデーション背景はログイン画面を意図的に感じさせる。グラデーション ボタンは、重い影や過度に明るい境界に頼ることなく、主なアクションを明確に示す。
By 2019 年、expo-linear-gradient と react-native-linear-gradient は React Native プロジェクトの 42% を超える, これはグラデーションがニッチな効果ではないことを強く示している。標準的な UI 工具として、生産アプリケーションで使用されている。装飾として追加されるのではなく、プロダクション アプリケーションで使用されている、 この React Native グラデーション採用の記事.
グラデーションがうまくいくこと
- 深みを生み出せ: 1つの平らな背景を持つ画面は未完成のように見える。上から下への微妙なブレンドは表面が層化されているように感じる。
- 視線を引く: 主なCTA、オンボーディングカード、ヘローヘッダーは視覚的なノイズを追加せずに目立つ。
- 画像アセットを置き換え: 多くの場合、グラデーションは背景画像を追加せずにポリッシュを与える。
実用的なルール: 階層が重要な場合にグラデーションを使用する。背景、ヘローカード、CTA表面、メディアオーバーレイが最も利益を受ける。フォームフィールド、密集したリスト、ボディーコピーコンテナは通常そうではない。
また、製品デザインの観点もある。プラットフォームをまたがるチームはすでにインターフェースを一貫させようとしている。そうしたスタックがあなたのものであれば、これらの クロスプラットフォームのUIとUXの慣習 モバイルアプリの
画面に合っている。アセットが少なく、再利用可能な表面が多く、スクリーンをまたがる視覚システムが持つべき特徴が同じである。
このフォークは、ほとんどの痛みの原因です。レンダリングAPIは、両方のライブラリでほぼ同じに感じられますが、セットアップはありません。
Expo管理アプリの場合、使用します。 expo-linear-gradientバレなれReact Nativeアプリの場合、使用します。 react-native-linear-gradient明確な理由がわかっている場合にのみ、境界線をぼかすことを試みないでください。
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開発クライアントを使用します。 カスタムネイティブ機能のためにExpo開発クライアントを使用します。 管理パスがアプリのニーズを満たさなくなった場合のみ。
React Nativeの基本設定
Bare React Nativeは直接ネイティブモジュールへのアクセスを提供しますが、粗いエッジはあなたのものです。
パッケージのインストール:
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の議論のまとめによると Stack Overflow の議論まとめ, また、同様のソースは、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);Jest設定ファイルにそのセットアップファイルを参照してください。
module.exports = {
preset: 'react-native',
setupFiles: ['<rootDir>/jest.setup.js'],
};Bare React Nativeはグラデーションでうまく動作しますが、設定が不完全な場合は許容しません。ほとんどのエラーは、視覚的なバグではありません。リンク、ポッド、またはテスト環境の問題です。
ここに実用的な決定表があります。
| プロジェクトのタイプ | ライブラリ | 最適なフィット |
|---|---|---|
| エクスポーマネージドアプリ | expo-linear-gradient |
最速のパス、最小の設定 |
| Bare React Nativeアプリ | react-native-linear-gradient |
フルネイティブコントロール |
| BareアプリにJest | react-native-linear-gradient +モック |
テストを安定させるために必要 |
UI要素のコアグレードテクニック
よくあるアプローチは、同じ小さなセットのグレードパターンを繰り返し使用することです。背景。ボタン。ヘッダー。3つが固定的であれば、多くの画面で再利用できます。
役立つメンタルモデルは次のとおりです。
colors色のパレットを制御します。startとendコントロール方向locationsトランジションの発生場所を制御します。
起動シーケンスのパターンについて説明しているこの 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,
},
});A diagonal blend is usually more dynamic than a vertical one. That’s why 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',
},
});ボタンでは、水平のグラデーションが斜めのものよりも読みやすいことがよくあります。ラベルを安定させ、コントロールが傾いたように見えないようにします。
グラデーションでテキストをマスクする
これは最も目立つパターンであり、制限を保ったまま使用すると便利です。ヒーロータイトル、アップグレードバナー、空の状態のヘッダーは適していますが、段落テキストではありません。
必要なのは @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 グラデーションで色を占める量が最も重要です。色が混濁している場合は、色の数を減らしてみましょう。色の停止を調整するのではなく、まず色の数を減らしてみましょう。
アニメーションでグラデーションを生み出す
静的なグラデーションはポリッシュを与えます。アニメーショングラデーションはフィードバックを与えます。
最も実用的な使い方は、派手な背景ではありません。アクティブなアプリ、データの流入、表示されているレイアウトが故障ではなく意図的なものであることをユーザーに伝えるため、シェイムローダーです。
シェイムコンポーネントは他のモーションパターンと相性が良く、既存のアニメーションアイコンやローダーを使用しているアプリでは、この React NativeのLottieガイド は、グラデーションシェイムが十分か、より豊かなアニメーションアセットが意味をなすかを判断するのに役立ちます。
ネイティブに感じるシェイムローダー
The simplest reliable version uses react-native-reanimated グラデーションを動かしてクリップしたプレースホルダー上に表示する。
install Reanimated if it isn’t already in your app, then create a wrapper with 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はまだシンプルに見えますが、レンダリングの挙動、読みやすさ、プラットフォームの一貫性は、初期の効果よりも重要になります。
あなたがアプリの反応性をより広く向上させる場合、この モバイルアプリのパフォーマンス最適化ガイド パフォーマンスチェックリスト
ネイティブのグラデーションは一般的に効率的ですが、まだ誤用することができます。
グラデーションを大きい装飾画像よりも好むことができます:
- 多くの画面サイズに適応しやすく、より簡単に配信できます。 重いアニメーションやブルー効果を含む複数のオーバーレイのグラデーションを避けることができます:
- 複数のフルスクリーンレイヤーを重ねるのを避けること。 再利用可能なコンポーネントをメモ化することができます:
- コンポーネントを再利用するにはメモ化を使用してください。 グラデーション カードがリスト内で使用される場合、プロパティは安定し、親の状態とは無関係な場合に再レンダリングしないようにします。
良いルールは、グラデーションを構造的で、過剰ではないものに保つことです。表面を定義するために使用し、密なフィード内の各行には使用しないようにします。
アクセシビリティ チェックリスト
グラデーションは表面の Contrast が変化することで読みやすさを損なう可能性があります。
- テスト テキストを最も明るいエリアでテストします: 白色のテキストが暗い側のブレンドにのみ機能する場合、機能しません。
- 必要に応じてスクリムを追加します: 背景とテキストの間の微妙な暗いオーバーレイは、パレット全体を変更するのではなく、よくありません。
- 大きな表示コピー用にグラデーション テキストを予約します: 見栄えの良い点ではなく、グラデーションの最悪の点を確認します。
プラットフォーム クイック チェックリスト
アクセシビリティ チェックリスト
iOSとAndroidは通常同じグラデーションを近くにレンダリングしますが、常に完璧ではありません。
| 問題 | 通常役立つもの |
|---|---|
| プラットフォーム間でグラデーションが異なる | グラデーションが異なるプラットフォーム |
| 色の数を減らし、停止間の明確なcontrastを使用します | Put overflow: 'hidden' グラデーションを表示する |
| コンテナに | グラデーションが表示されない flex: 1 幅、高さ、または |
最初に
トラブルシューティングと最終的なベストプラクティス
プロジェクトノートに残す短いバージョンです。
- ライブラリをワークフローに合わせてください:
expo-linear-gradientExpo管理アプリの場合react-native-linear-gradientReact Nativeの場合 - グラデーションを意図的に使ってください: 背景、CTA、オーバーレイ、ヘローテキストは強力な使用例です。
- 方向を意図的に制御してください: ボタン用に水平、装飾用に斜め、テキストが大きい場合にのみマスクしてください。
- コンテンツに設計してください、空の状態は除きます: 実際のコピー、アイコン、ステータスバーの処理とテストしてください。
- バレーセットアップをネイティブセットアップとして扱ってください: Pods、リンク、Jestモックは省略できない細かい事です。
よくある失敗は3つあります。
グラデーションが表示されない
原因：コンポーネントが見えるサイズがない
対処法：明示的な高さを与える、または親要素に寸法を与える。寸法のないレイアウトボックスを持つグラデーションは、意味のある形でレンダリングされません。 flex: 1iOSビルドがインストール後に破損する
原因：Podsがインストールされていなかったり、ネイティブ依存グラフが同期されていなかったり
対処法：
修正:実行 pod install in ios原因：Jestモックが設定されていなかったり、依存関係が不正確だったり
対処法：
原因: Jestは実際のネイティブモジュールを読み込もうとしています。
解決策: mock react-native-linear-gradient with react-native-linear-gradient/jest/linear-gradient-mock Jestのセットアップファイルに
このガイドの全体から1つのアイデアを残すなら、この1つだけを覚えておけ: グラデーション自体は簡単だ。生産用のセットアップは主な努力だ。一度に適切なライブラリをアプリケーションアーキテクチャに選択したら、その後は予測可能になる。
チームがハイブリッドモバイルアプリをリリースし、JavaScript、CSS、コピー、設定、資産の更新をストアのレビュー待たずにプッシュしたい場合 Capgo CapacitorJSとElectronチームに制御されたライブアップデート、ロールアウトチャンネル、ロールバック保護、リリース可視性を提供するCapgoは、展開プロセスを黒箱化せずに値する。
