Master Linear Gradient React Native: Schöne UIs im Jahr 2026

Sie haben wahrscheinlich eines von zwei Situationen getroffen.

Entweder Ihre Anzeige sieht flach und unvollendet aus, und Sie möchten einen Hintergrund oder eine Schaltfläche, die sich wie ein echtes Produkt anfühlt, anstatt wie ein Rohbau. Oder Sie haben bereits versucht, einen linearen Gradienten in React Native hinzuzufügen, und jetzt sind Sie in der Sackgasse der Einrichtung gelandet, weil die Hälfte der Beispiele Expo verwendet und die andere Hälfte eine native Projekt mit Bare annehmen lässt.

Die Trennung ist der Punkt, an dem sich die meisten Anleitungen als unbrauchbar erweisen. Der Komponente API ist einfach. Die Umgebungsentscheidung hingegen nicht. Eine saubere lineare Gradienten-Einstellung in React Native hängt weniger von der colors Eigenschaft und mehr, um zu entscheiden, ob Sie sich im Expo-gesteuerten Workflow befinden oder mit der Verlinkung von nativen Komponenten, Pods und Test-Mockups selbst umgehen müssen.

Inhaltsverzeichnis

• Warum Ihre React Native App Gradienten benötigt
  • Was Gradienten gut machen
• Wählen Sie Ihren Weg Expo gegenüber Bare React Native Setup
  • Expo-Einrichtung
  • Bare React Native-Einrichtung
  • Wo sich Bare-Projekte normalerweise aufbrechen
• Grundlegende Gradient-Techniken für UI-Elemente
  • Vollbild-Hintergrund-Gradienten
  • Gradienten-Buttons, die sich wie normale Buttons verhalten
  • Gradienten-Text mit einem Mask
• Leben Sie Gradienten mit Animationen
  • Ein Schimmerelement, das sich nativ anfühlt
  • Das animierte Komponente
• Leistung, Zugänglichkeit und Plattform-Spezifika
  • Leistungscheckliste
  • Zugänglichkeitscheckliste
  • Checkliste für Plattform-Spezifika
• Fehlersuche und letzte Best Practices
  • Gradient nicht sichtbar
  • iOS-Build bricht nach der Installation
  • Tests fehlschlagen mit Fehlermeldungen für native Module

Warum Ihre React Native App Gradienten benötigt

Aufgrund desselben Grundes scheitern viele mobile Benutzeroberflächen. Die Anordnung ist in Ordnung, der Abstand ist in Ordnung, die Typografie ist akzeptabel, aber das Bildschirmgefühl ist immer noch tot. Füllungen machen alles aussehen wie Platzhalter, es sei denn, das restliche visuelle System tut viel Arbeit.

A linear gradient React Native Ein Komponenten-Plugin, das mit sehr wenig code funktioniert. Es fügt Tiefe hinzu, schafft eine Trennung zwischen Abschnitten und gibt hohen Prioritäts-ELEMENTEN einen klaren visuellen Gewicht. Ein gutes Gradient-Hintergrund kann einen Login-Bildschirm absichtsvoll machen. Ein gutes Gradient-Button kann die primäre Aktion ohne das Rückgriff auf schwere Schatten oder übermäßig laute Bordern offensichtlich machen.

Mit 2019 erschienen expo-linear-gradient und react-native-linear-gradient in über 42% der React Native-Projekte, was ein starkes Signal ist, dass Gradienten nicht mehr ein Nischeneffekt sind. Sie sind Standard-UI-Tooling in Produktionsanwendungen, nicht eine Dekoration, die am Ende angebaut wird, wie in diesem Artikel über die Einführung von Gradienten in React Native.

Wie Gradienten gut funktionieren

• Erstelle Tiefe: Eine Fläche mit einem flachen Hintergrund sieht oft unvollendet aus. Ein subtiler top-to-bottom-Blend macht die Oberfläche so aussehen, als ob sie geschichtet ist.
• Lenke die Aufmerksamkeit: Primäre CTAs, Onboarding-Karten und Hero-Überschriften fügen sich ohne visuelles Rauschen ab.
• Ersetzen Sie Bilddateien: Viele Fälle: Ein Farbverlauf gibt Ihnen ohne zusätzliche Hintergrundbilder einen Touch.

Praktische Regel: Verwenden Sie Farbverläufe, wenn Hierarchie wichtig ist. Hintergründe, Hero-Karten, CTAs, Medien-Überlagerungen und Formularelemente profitieren am meisten. Formulare, dichte Listen und Körperkopie-Container tun das normalerweise nicht.

Es gibt auch einen Produktionsdesign-Aspekt. Teams, die über Plattformen arbeiten, verbringen bereits Zeit damit, die Benutzeroberfläche konsistent zu halten. Wenn das Teil Ihres Stacks ist, passen sich diese Übersetzungen für mobile Apps Übersetzungen für mobile Apps

Übersetzungen für mobile Apps

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

Übersetzungen für mobile Apps expo-linear-gradientÜbersetzungen für mobile Apps react-native-linear-gradient. Versuchen Sie nicht, diese Linien zu verwischen, es sei denn, Sie wissen genau, warum Sie es tun.

Expo-Einrichtung

Expo ist der glattere Weg. Die Installation ist unkompliziert, die Versionsabstimmung wird für Sie gehandhabt und Sie müssen sich nicht um native Verknüpfungen kümmern.

Installieren Sie es wie folgt:

npx expo install expo-linear-gradient

Verwenden Sie es wie folgt:

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 ist die richtige Wahl, wenn Sie eine schnelle Einrichtung, vernünftige Standards und weniger native Kanten wollen. Das ist auch der Grund, warum Teams, die sich mit fortgeschrittenen Expo-Workflows beschäftigen, oft dazu kommen, ein Expo-Entwicklungsclient für benutzerdefinierte native Fähigkeiten nur dann, wenn der verwaltete Weg die Bedürfnisse der App nicht mehr abdeckt.

Bare React Native-Einrichtung

Bare React Native bietet Ihnen direkten Zugriff auf native Module, aber Sie müssen sich die rauhen Kanten selbst zulegen.

Installieren Sie das Paket:

npm install react-native-linear-gradient

Für iOS installieren Sie Pods:

cd ios && pod install

Grundlegende Verwendung:

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',
  },
});

Wo sich normale Projekte normalerweise aufbrechen

Das fehlende Stück in den meisten Tutorials ist die Testung und die native Einrichtung. Laut dieser Zusammenfassung einer Diskussion auf Stack Overflow, 68% der Stack Overflow-Threads zu diesem Thema im Jahr 2024 bis 2025 beziehen sich auf Fehler bei native Modulen in barem React Native-Setup, und die gleiche Quelle weist wiederkehrende Probleme mit Jest-Mocken und iOS-CocoaPods-Konflikten auf.

Wenn Sie Jest in einem barem App verwenden, fügen Sie den Mock explizit hinzu:

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

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

Und verweisen Sie auf die Einrichtungsdatei in Ihrer Jest-Konfiguration:

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

Bare React Native funktioniert gut für Gradienten. Es verzieht sich einfach nicht die unvollständige Einrichtung. Die meisten Fehler sind keine visuellen Bugs. Sie sind Verknüpfungen, Pods oder Probleme mit der Testumgebung.

Hier ist die praktische Entscheidungstabelle:

Eine gängige Vorgehensweise besteht darin, denselben kleinen Satz von Gradientenmustern wiederholt anzuwenden. Hintergründe. Schaltflächen. Überschriften. Wenn diese drei fest sind, können sie über viele Bildschirme hinweg wiederverwendet werden.

Ein Person arbeitet an einem Laptop und zeigt ein modernes Dashboard-Interface mit farbigen Gradienten-Design-Elementen.

Außerdem ist diese mentale Vorstellung hilfreich:

• colors steuert die Farbpalette
• start und end die Steuerung der Richtung
• locations bestimmt, wo Übergänge stattfinden

Wenn Ihre Splash- oder Einsteigungsseite eine Gradient verwendet, passt sie natürlich mit den umfassenderen Startsequenzen zusammen, die in diesem Reaktive Native-Splash-Screen-Leitfaden.

Vollbild-Hintergrund-Gradienten

Dies ist der einfachste und am besten verwendbare Muster.

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,
  },
});

Ein diagonaler Blend fühlt sich dynamischer an als ein Standard-vertikaler. Deshalb start={{ x: 0, y: 0 }} und end={{ x: 1, y: 1 }} sind eine gute Voreinstellung, wenn die Seite hauptsächlich dekorativ ist.

Wählen Sie Farben nicht isoliert. Testen Sie sie hinter realen Texten, Icons und Statusleisten. Eine Palette, die in Figma gut aussieht, kann sich sofort nachdem Inhalte darauf gesetzt wurden, als katastrophal herausstellen.

Gradienten-Buttons, die wie Buttons funktionieren

Der häufigste Fehler besteht darin, das Berührungverhalten direkt auf dem Gradienten zu setzen und dabei den deaktivierten Zustand, den Druckpunkt oder die Konsistenz der Abstände zu vergessen. Halten Sie den Button semantisch und lassen Sie den Gradienten als visuelle Ebene übrig.

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',
  },
});

Für Buttons liest sich ein horizontaler Gradient besser als ein diagonaler. Er hält das Label stabil und vermeidet es, dass das Steuerungselement sich schief anfühlt.

Gradient-Text mit Maskierung

Dies ist das auffälligste Muster im Set und ist nützlich, wenn Sie es zurückhalten. Heldenüberschriften, Upgrade-Banner und leere Zustandsüberschriften sind gute Kandidaten. Absatztext ist nicht.

Sie benötigen @react-native-masked-view/masked-view.

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

Dann bauen Sie den Textmasken:

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 ist am wichtigsten, wenn Sie möchten, dass eine Farbe mehr visuellen Raum einnimmt als eine andere. Wenn das Mischen sich schmutzig anfühlt, reduzieren Sie zunächst die Anzahl der Farben. Das löst das Design häufig schneller als das Anpassen jedes Stücks.

Gradients zum Leben bringen mit Animationen

Statiche Gradienten geben Ihnen einen Touch. Animierte Gradienten geben Ihnen Feedback.

Der praktischste Einsatz ist kein auffälliger Hintergrund. Es ist ein Schimmer-Loader. Dieser Effekt sagt den Benutzern, dass die App aktiv ist, Daten kommen und die Layout, die sie sehen, absichtlich und nicht gebrochen ist.

Aus dem Shimmer-Component ergänzt sich auch andere Bewegungsmuster. Wenn Ihr App bereits animierte Icons oder Loader verwendet, ist dies Lottie in React Native Anleitung nützlich für die Entscheidung, wann ein Farb-Shimmer ausreicht und wann ein reichhaltigerer Animation-Assistent mehr Sinn macht.

Ein Shimmer-Loader, der sich nativ anfühlt

Die einfachste zuverlässige Version verwendet react-native-reanimated um eine Farb-Band zu bewegen, das sich über einen abgeschnittenen Platzhalter bewegt.

Installieren Sie Reanimated, wenn es nicht bereits in Ihrer App ist, dann erstellen Sie einen Wrapper mit overflow: 'hidden'Innerhalb davon animieren Sie eine Farb-Layer von links nach rechts.

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,
  },
});

Was funktioniert, ist, dass Sie nicht versuchen, die Farbdefinition selbst zu animieren. Sie animieren eine Farb-Layer über einen statischen Platzhalter. Das ist einfacher, leichter zu verstehen und meist stabiler auf verschiedenen Geräten.

Hier ist eine visuelle Durchführung des Effekts in der Praxis:

Der animierte Komponente

Einige Implementierungsanmerkungen sind wichtig:

• Verwenden Sie das Ausschneiden: Der Elternteil benötigt overflow: 'hidden', oder der Schimmer wird außerhalb der abgerundeten Ecken über die Kante hinauslaufen.
• Halten Sie die Bandbreite eng: Ein kleiner animierter Layer ist einfacher zu justieren als die gesamte Oberfläche zu animieren.
• Passen Sie die Grundfarbe an die Bildschirmfarbe an: Skeleton-Loader sollten sich in die umgebende Layoutanordnung einfügen und nicht wie ein separates Widget aussehen.

Animierte Gradienten funktionieren am besten, wenn die Benutzer sie kaum wahrnehmen. Wenn der Schimmer das Lauteste auf dem Bildschirm wird, tut er zu viel.

Leistung, Barrierefreiheit und Plattform-Spezifika

Sobald Gradienten von Demo-Screens in die Produktion wechseln, ändern sich die Bedenken. Der code sieht immer noch einfach aus, aber das Rendern, die Lesbarkeit und die Plattform-Konsistenz werden wichtiger als der ursprüngliche Effekt.

Wenn Sie die App-Responsivität allgemein weiter verbessern, gilt dies auch hier Leitfaden zur Optimierung der mobilen App-Performance Dieser Ansatz passt in das gleiche Denkmodell: Verringern Sie unnötige Arbeit, messen Sie auf echten Geräten und optimieren Sie die Oberflächen, die die Benutzer am meisten sehen.

Leistungskontrolle

Nativ-Gradienten sind im Allgemeinen effizient, aber Sie können sie immer noch missbrauchen.

• Präferieren Sie Gradienten gegenüber großen dekorativen Bildern: Sie sind oft sauberer zu versenden und einfacher an mehrere Bildschirmgrößen anzupassen.
• Vermeiden Sie das Stapeln mehrerer vollbildschirmiger Layer: Ein Hintergrund-Gradient ist in Ordnung. Mehrere überlappende durchsichtige Gradienten plus Blur plus schwere Animation können teuer werden.
• Memoisieren Sie wiederholbarer Komponenten: Wenn ein Gradienten-Card in einer Liste verwendet wird, halten Sie die Props stabil und vermeiden Sie das Rerendern, wenn der Eltern-Zustand unabhängig ist.

Ein gutes Regel ist, Gradienten strukturell und nicht übermäßig zu verwenden. Verwenden Sie sie, um Oberflächen zu definieren, nicht jede Zeile in einer dichten Feed.

Barrierefreieheit-Kontrolle

Farbengradienten können die Lesbarkeit schnell beeinträchtigen, da sich der Contrast über der Oberfläche ändert.

• Testen Sie das Text gegen die hellste Fläche: Wenn weißer Text nur auf der dunklen Seite des Blendings funktioniert, funktioniert er nicht.
• Fügen Sie ein Schilderwerk hinzu, wenn nötig: Ein subtiler dunkler Überzug zwischen Hintergrund und Text ist oft besser als das Ändern des gesamten Farbschemas.
• Reservieren Sie Gradienten-Text für große Anzeigekopien: Es sieht gut auf Überschriften aus. Es ist eine schlechte Wahl für kleine Bezeichnungen, Hilfetext oder alles, was für die Erledigung einer Aufgabe kritisch ist.

Überprüfen Sie den schlimmsten Fall auf dem Gradienten, nicht den schönsten.

Plattform-Sonderheiten-Checkliste

iOS und Android renderen die Farbengradienten normalerweise sehr ähnlich, aber nicht immer perfekt.

Beachten Sie auch Ihre Statusleiste und Behandlung des sicheren Bereichs. Ein Bildlauf, der im Simulator ausbalanciert aussieht, kann auf einem Gerät mit einem Notch wie ein Top-Modell wirken, wenn sich der Inhalt und Hintergrund nicht auf diesen zusätzlichen Platz einlassen.

Fehlersuche und Endgültige Best Practices

Hier ist die kurze Version, die ich in einem Projekt-Notiz behalten würde.

• Passen Sie die Bibliothek an den Workflow an: expo-linear-gradient für Expo-gesteuerte Apps react-native-linear-gradient für bare React Native.
• Halten Sie Gradienten zweckmäßig: Hintergründe, CTAs, Überlagerungen und Heldentexte sind starke Einsatzfälle.
• Steuerung der Richtung absichtlich: Horizontal für Schaltflächen, diagonal für dekorative Hintergründe, nur maskiert für großen Text.
• Entwerfen Sie für Inhalte, nicht für leere Zustände: Testen Sie mit echter Kopie, Icons und Statusleistenbehandlung.
• Behandeln Sie bare Setup als native Setup: Pods, Verknüpfungen und Jest-Mocks sind keine optionalen Details.

Drei häufige Fehler kommen wiederholt vor.

Gradient nicht sichtbar

Ursache: Das Komponenten hat keine sichtbare Größe.

Lösung: Geben Sie ihm flex: 1, eine explizite Höhe oder einen Elternelement mit Dimensionen.

Ein Gradient mit keinem Layout-Box wird auf keinen bedeutenden Weg rendern.

iOS-Build bricht nach der Installation

Ursache: Pods wurden nicht installiert oder das native Abhängigkeitsgraph ist aus der Synchronisation. pod install Lösung: Führen Sie iosin

, den Build-Ordner cleanen, wenn nötig, und den App neu aufbauen. In Projekten ohne native Abhängigkeiten reicht das Paketinstallieren alleine normalerweise nicht.

Tests scheitern mit Fehlermeldungen von native Modulen

Ursache: Jest versucht, das tatsächliche native Modul zu laden. react-native-linear-gradient Lösung: Mocken Sie react-native-linear-gradient/jest/linear-gradient-mock In Ihrer Jest-Einrichtungsdatei.

Wenn Sie nur eine Idee aus dieser ganzen Anleitung behalten, dann behalten Sie diese: Der Gradient selbst ist leicht. Die Produktionsreife-Einrichtung ist der Hauptaufwand. Sobald Sie die richtige Bibliothek für Ihre App-Architektur ausgewählt haben, wird alles danach viel vorhersehbarer.

Wenn Ihr Team Hybrid-Apps für Mobilgeräte entwickelt und JavaScript, CSS, Kopien, Konfigurationen und Asset-Updates ohne Wartezeit auf die Store-Überprüfung verteilen möchte, Capgo ist es wert, einen Blick darauf zu werfen. Es bietet den CapacitorJS- und Electron-Team kontrollierte Live-Updates, Rollout-Kanäle, Rückschlagschutz und Release-Transparenz, ohne Ihre Bereitstellungsprozesse in einen schwarzen Kasten zu verwandeln.