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 Rahmen.

Oder Sie haben bereits versucht, einen linearen Gradienten für React Native hinzuzufügen, und jetzt sind Sie in der Konfigurations-Hölle gefangen, weil die Hälfte der Beispiele Expo verwendet und die andere Hälfte an eine bare native Projekt anknüpft. Das ist der Punkt, an dem sich die meisten Tutorials aufhören, nützlich zu sein. Der Komponente API ist einfach. Die Umgebungsentscheidung hingegen nicht. Eine saubere lineare Gradienten-Einstellung für React Native hängt weniger von der colors Eigenschaften und mehr hängen davon ab, ob Sie sich im Expo-gesteuerten Workflow befinden oder mit der Verlinkung von Pods und Test-Mocks selbst umgehen.

Inhaltsverzeichnis

• Warum Ihre React Native App Gradienten benötigt
  • Was Gradienten gut machen
• Wählen Sie Ihren Weg Expo vs Bare React Native Setup
  • Expo-Einstellung
  • Bare React Native-Einstellung
  • Wo sich Bare-Projekte normalerweise aufbrechen
• Grundlegende Gradiententechniken für UI-Elemente
  • Vollbild-Hintergrundgradienten
  • Gradienten-Buttons, die sich wie normale Buttons verhalten
  • Gradienten-Text mit einem Mask
• Mit Gradienten Leben in Bewegung setzen
  • Ein Schimmerelement, das sich wie ein natives Element 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 UIs. Die Layout ist in Ordnung, der Abstand ist in Ordnung, die Typografie ist akzeptabel, aber das Bildschirmgefühl ist immer noch tot. Feste Füllungen machen alles aussehen wie Platzhalter, es sei denn, das restliche visuelle System tut viel Arbeit.

A linear gradient React Native Ein Komponente, die code verbessert, fügt mit sehr wenig Aufwand Tiefe hinzu, schafft eine Trennung zwischen Abschnitten und gibt hohen Prioritäts-ELEMENTEN einen klaren visuellen Gewicht. Ein guter Gradient-Hintergrund kann eine Anmelde-Seite absichtsvoll machen. Ein guter Gradient-Button kann die primäre Aktion ohne das Rückgriff auf starke Schatten oder übermäßig laute Bordüren 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 Nischen-Effekt sind. Sie sind Standard-UI-Tooling in Produktionsanwendungen, nicht eine Dekoration, die am Ende angebaut wird, wie in diesem Artikel über die Akzeptanz von Gradienten in React Native.

Wie Gradienten gut funktionieren

• Tiefenwirkung erzeugen: Ein Bildschirm mit einem flachen Hintergrund sieht oft unvollendet aus. Ein subtiler top-to-bottom-Blend macht die Oberfläche fühlen, als ob sie geschichtet ist.
• Die Aufmerksamkeit lenken: Primäre CTAs, Onboarding-Karten und Hero-Überschriften fangen ohne visuelle Lärm auf.
• Ersetzen Sie Bild-Assets: Viele Fälle geben Ihnen einen Touch ohne zusätzliche Hintergrundbilder.

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

Es gibt auch einen Produkt-Design-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 Grenzen 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 um die rauhen Kanten kümmern.

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 Projekte ohne Bare normalerweise scheitern

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 auf wiederkehrende Probleme mit Jest-Mocken und iOS-CocoaPods-Konflikten hin.

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 bei unvollständiger Einrichtung. Die meisten Fehler sind keine visuellen Bugs. Sie sind Verknüpfungs-, Pods- oder Testumgebungsschwierigkeiten.

Hier ist die praktische Entscheidungstabelle:

Grundlegende Gradiententechniken für UI-Elemente

Eine gängige Vorgehensweise besteht darin, denselben kleinen Satz von Gradientenmustern immer wieder zu verwenden. Hintergründe. Schaltflächen. Überschriften. Wenn diese drei fest sind, können Sie sie über viele Bildschirme hinweg wiederholen.

Ein nützliches mentales Modell ist dies:

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

Wenn Ihre Splash- oder Einblendungs-Einstiegsseite einen Farbverlauf verwendet, passt sie natürlich mit den umfassenderen Startsequenzmustern, die in diesem Leitfaden für React Native-Splash-Screens beschrieben werden.

Vollbild-Hintergrund-Gradienten

Dies ist das einfachste und am meisten wiederverwendbare 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 Standardvertikal-Blend. Deshalb start={{ x: 0, y: 0 }} und end={{ x: 1, y: 1 }} sind ein gutes Standard, wenn die Seite hauptsächlich dekorativ ist.

Wählen Sie keine Farben isoliert. Testen Sie sie hinter realen Texten, Icons und Statusleisten. Eine Palette, die in Figma gut aussieht, kann sofort scheitern, wenn Inhalte darauf sitzen.

Gradienten-Buttons, die wie Buttons funktionieren

Der gemeinsame Fehler besteht darin, die Berührungsbewegung direkt auf den Gradienten zu legen und den deaktivierte Zustand, die Druckrückmeldung oder die Paddingleistung zu vergessen. Halten Sie den Button semantisch und lassen Sie den Gradienten die visuelle Ebene sein.

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 die Beschriftung stabil und vermeidet es, dass das Steuerungsgefühl schief wirkt.

Gradienten-Text mit Maskierung

Dies ist das auffälligste Muster in der Reihe, und es ist nützlich, wenn Sie es zurückhalten. Heldenüberschriften, Upgradebanner 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 Die Farbgebung ist am wichtigsten, wenn Sie eine Farbe mehr visuellen Raum als eine andere einnehmen lassen möchten. Wenn das Mischen sich in der Masse verliert, 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

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

Der praktischste Einsatz ist kein auffälliger Hintergrund. Es ist ein Schimmerlader. Diese Wirkung sagt den Benutzern, dass die App aktiv ist, Daten kommen und die Layout, die sie sehen, ist absichtlich und nicht gebrochen.

Ein Schimmer-Komponente passt sich auch anderen Bewegungsmustern an. Wenn Ihre App bereits animierte Icons oder Loader verwendet, ist dies Lottie in React Native Anleitung wirksam für die Entscheidung, wann ein Farb-Schimmer ausreicht und wann ein reichhaltigeres Animationselement mehr Sinn macht.

Ein Schimmer-Loader, der sich anfühlt wie ein Native-Element

Die einfachste zuverlässige Version verwendet react-native-reanimated um eine Farb-Bande über einen geklittenen Platzhalter zu bewegen.

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-Schicht 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-Schicht ü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 das Schimmern wird außerhalb gerundeter Ecken über die Kanten 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 zur Bildschirmfarbe an: Skeleton-Loader sollten sich an die umgebende Layout anpassen und nicht wie ein separates Widget aussehen.

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

Leistung, Zugänglichkeit und Plattform-Spezifika

Sobald Gradienten von Demo-Screens in die Produktion wechseln, ändern sich die Bedenken. Das 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 das auch hier Leitfaden für die Optimierung der mobilen App-Performance Dieser Ansatz passt zum gleichen Denkansatz: Reduzieren 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 vieler vollbildschirmiger Layer: Ein Hintergrund-Gradient ist in Ordnung. Mehrere überlappende, durchsichtige Gradienten plus Blur plus schwere Animationen können teuer werden.
• Memoisieren Sie wiederholbarer Komponenten: Wenn ein Gradienten-Card in einer Liste verwendet wird, halten Sie die Eigenschaften stabil und vermeiden Sie das Rerendern, wenn sich der Elternzustand ändert.

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 Liste.

Barrierefreie 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 Scherm wenn nötig hinzu: Ein subtiler dunkler Überzug zwischen Hintergrund und Text ist oft besser als das Ändern des gesamten Farbpalettes.
• 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 Kritische, um eine Aufgabe abzuschließen.

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

Plattform-Quirks-Checkliste

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

Beachten Sie auch Ihre Statusleiste und die Behandlung des sicheren Bereichs. Ein Bildlauf, der sich auf dem Simulator ausgewogen anfühlt, kann auf einem Gerät mit einem Notch wie ein Top-Heavy-Gefühl aussehen, 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 in Richtung vorsehen: 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, Verlinkung und Jest-Mocks sind keine optionalen Details.

Drei häufige Misserfolge kommen wiederholt vor.

Gradient nicht sichtbar

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

Lösung: Geben Sie ihm eine explizite Höhe oder einen Elternelement mit Dimensionen. flex: 1Ein Gradient mit keinem Layout-Box wird auf keinen bedeutenden Weg rendern.

iOS-Build fehlt nach der Installation

Ursache: Pods wurden nicht installiert oder das native Abhängigkeitsdiagramm ist nicht synchron.

Lösung: Führen Sie pod install in ios, den Build-Ordner saubermachen, wenn nötig, und den App neu erstellen. In Projekten ohne native Abhängigkeiten reicht das Paketinstallieren normalerweise nicht aus.

Tests fehlschlagen mit Fehlermeldungen von nativen Modulen

Ursache: Jest versucht, das tatsächliche native Modul zu laden.

Lösung: Mocken Sie react-native-linear-gradient mit react-native-linear-gradient/jest/linear-gradient-mock in Ihrem Jest-Einrichtungsdatei.

Wenn Sie nur eine Idee aus dieser ganzen Anleitung behalten, 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 pushen möchte, Capgo ist es wert, einen Blick darauf zu werfen. Es bietet den CapacitorJS- und Electron-Team kontrollierte Live-Updates, Rollout-Kanäle, Rollover-Schutz und Release-Transparenz ohne Ihre Bereitstellungsprozesse in einen schwarzen Kasten zu verwandeln.