Mobile

Martin Donadieu

Content Marketer

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 prop e altro a seconda se si è in un workflow gestito da Expo o si stanno gestendo i collegamenti nativi, i pods e i test di mock.

Elenco dei contenuti

• Perché il tuo'app React Native ha bisogno di gradienti
  • Cosa fanno bene i gradienti
• Scegliere il tuo percorso Expo vs Bare React Native Setup
  • Configurazione Expo
  • Configurazione React Native Bare
  • Dove i progetti Bare si rompono di solito
• Tecniche di base per i gradienti degli elementi di interfaccia utente
  • Gradienti di sfondo a schermo intero
  • Bottoni con gradienti che funzionano ancora come bottoni
  • Testo con maschera e sfondo a gradiente
• Portare le Gradazioni alla Vita con Animazioni
  • Un caricamento sfumato che si sente nativo
  • Il componente animato
• Performance, Accessibilità e Anomalie di Piattaforma
  • Elenco di controllo delle prestazioni
  • Elenco di controllo dell'accessibilità
  • Elenco di controllo delle anomalie di piattaforma
• Risolvere Problemi e Pratiche Ottimali Finali
  • La gradazione non appare
  • La compilazione iOS si interrompe dopo l'installazione
  • I test falliscono con errori di modulo nativo

Perché la tua App React Native ha Bisogno di Gradazioni

A molti UI mobili falliscono per la stessa ragione. La disposizione è corretta, lo spazio è corretto, la tipografia è accettabile, ma lo schermo sembra ancora morto. I riempimenti solidi fanno sembrare tutto dei placeholder a meno che il resto del sistema visivo non stia facendo molto lavoro.

A componente di sfumatura lineare 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.

aggiunge profondità, crea una separazione tra le sezioni e dà agli elementi di alta priorità un peso visivo chiaro. Un buon sfondo di sfumatura può rendere una schermata di accesso intenzionale. Un buon pulsante di sfumatura può rendere l'azione principale evidente senza ricorrere a ombre pesanti o bordi troppo rumorosi. Da2019, expo-linear-gradient e react-native-linear-gradient sono stati utilizzati in oltre il 42% dei progetti React Native , che è un segnale forte che le sfumature non sono più un effetto nichilista. Sono strumenti di base per la creazione di UI in produzione, non decorazioni aggiunte alla fine, come notato in.

questo articolo di adozione delle sfumature React Native

• Cosa fanno bene le sfumature Creano profondità:
• Una schermata con un unico sfondo piatto spesso sembra incompleta. Un blend top-to-bottom leggero fa sentire la superficie stratificata. Le CTAs primari, le carte di onboarding e i titoli eroici si distinguono senza aggiungere rumore visivo.
• Rimpiazzare gli asset di immagine: Spesso, un gradiente ti dà un tocco di classe senza inviare immagini di sfondo aggiuntive.

Regola pratica: Usa i gradienti dove la gerarchia conta. I fondi, le carte eroiche, le superfici dei pulsanti e le sovrapposizioni dei media ne beneficiano di più. I campi di form, le liste dense e i contenitori di testo non lo sono di solito.

C’è anche un aspetto di progettazione del prodotto qui. Le squadre che lavorano su più piattaforme già passano del tempo a mantenere le interfacce coerenti. Se questo è parte del tuo stack, queste pratiche di UI e UX per applicazioni mobili si allineano bene con lo stesso modo di pensare: meno asset, più superfici riutilizzabili e sistemi visivi che si mantengono su più schermi.

Scegliere il tuo percorso Expo vs Bare React Native Setup

Questo è il punto di forza che causa più dolore. La rendering del API si sente quasi identico in entrambe le librerie, ma la configurazione non lo è.

Se sei in un'app gestita da Expo, utilizza expo-linear-gradientSe sei in un'app React Native nuda, utilizza react-native-linear-gradient. Non cercare di sfumare queste linee a meno che tu non sappia esattamente perché lo stai facendo.

Configurazione di Expo

Expo è la strada più liscia. L'installazione è semplice, la versione è gestita per te e non devi pensare a collegamenti nativi.

Installa come segue:

npx expo install expo-linear-gradient

Usalo come segue:

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 è la scelta giusta quando desideri un setup veloce, impostazioni sane e pochi bordi nativi. È anche per questo motivo che gli squadre che esplorano workflow avanzati di Expo finiscono spesso per utilizzare un cliente di sviluppo di Expo per capacità native personalizzate solo quando il percorso gestito non copre più le esigenze dell'applicazione.

Configurazione di React Native bare

React Native bare ti dà accesso diretto ai moduli nativi, ma tu devi gestire le asperità.

Installa il pacchetto:

npm install react-native-linear-gradient

Per iOS, installa i pods:

cd ios && pod install

Utilizzo base:

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

Dove i progetti senza niente di solito si rompono

La parte mancante in quasi tutti i tutorial è la testing e la configurazione nativa. Secondo questa sintesi di discussione su Stack Overflow, 68% delle discussioni su Stack Overflow su questo argomento nel 2024-2025 coinvolgono fallimenti di moduli nativi nei set di React Native senza niente, e la stessa fonte nota problemi ricorrenti con Jest mocking e conflitti di CocoaPods su iOS

Se utilizzi Jest in un'app senza niente, aggiungi esplicitamente il mock:

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

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

E fai riferimento a quel file di configurazione nella tua configurazione Jest:

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

React Native senza niente funziona bene per gradienti. Non perdonerà però una configurazione incompleta. La maggior parte delle fallite non sono bug visivi. Sono problemi di collegamento, pods o ambiente di test.

Ecco la tabella di decisione pratica:

Tecniche di base per gli elementi di interfaccia di gradient

Un approccio comune è utilizzare lo stesso piccolo insieme di modelli di gradient ripetutamente. Fondali. Bottoni. Titoli. Se questi tre sono solidi, puoi ripeterli su molti schermi.

A un modello mentale utile è questo:

• colors controlla la paletta
• start e end controlla la direzione
• locations controlla dove avvengono le transizioni

Se la tua schermata di avvio o di ingresso utilizza un gradiente, si abbina naturalmente con i modelli di sequenza di avvio descritti in questo guida della schermata di avvio React Native.

Gradini di sfondo a schermo intero

Questo è il modello più semplice e più riutilizzabile.

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

Un blend diagonale solitamente sembra più dinamico di un verticale di default. Quindi start={{ x: 0, y: 0 }} e end={{ x: 1, y: 1 }} sono un buon default quando lo schermo è per lo più decorativo.

Non scegliere i colori in isolamento. Testali dietro testi reali, icone e stili di barra dello stato. Una paletta che sembra bella in Figma può fallire istantaneamente non appena il contenuto si posiziona sopra di essa.

Bottoni a gradiente che ancora comportano come bottoni

L'errore più comune qui è mettere il comportamento di tocco direttamente sul gradiente e dimenticarsi dello stato disabilitato, del feedback di pressione o della consistenza del padding. Tieni il bottone semantico e lascia che il gradiente sia il layer visivo.

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

Per i bottoni, un gradiente orizzontale legge meglio di uno diagonale. Mantiene la label stabile e evita di far sentire il controllo inclinato.

Testo a gradiente con maschera

Questo è il pattern più flash più del set, e è utile quando lo si tiene a freno. Titoli di eroe, banner di aggiornamento e intestazioni di stato vuoto sono buoni candidati. Il testo di paragrafo non lo è.

Avrai bisogno di @react-native-masked-view/masked-view.

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

Poi costruisci la maschera del testo:

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 è ciò che conta di più quando vuoi che un colore occupi più spazio visivo di un altro. Se il blend sembra fangoso, riduci il numero di colori prima. Di solito risolve il problema più velocemente di quanto non faccia l'adattamento di ogni stop.

Portare i Gradienzi alla Vita con le Animazioni

I gradienzi statici ti danno un tocco di classe. I gradienzi animati ti danno feedback.

L'uso più pratico non è un sfondo flash. È un caricatore che si sfalda. Quell'effetto dice ai utenti che l'app è attiva, i dati stanno arrivando e il layout che stanno vedendo è intenzionale e non rotto.

Un componente di scintillio può anche completare altri modelli di movimento. Se la tua app utilizza già icone animate o caricamenti, questo Guida di Lottie in React Native è utile per decidere quando uno scintillio a gradiente è sufficiente e quando un asset di animazione più ricco fa più senso.

Un caricamento di scintillio che si sente nativo

La versione più semplice e affidabile utilizza react-native-reanimated per spostare una banda a gradiente su un placeholder tagliato.

Installa Reanimated se non è già presente nella tua app, poi crea un wrapper con overflow: 'hidden'all'interno di esso anima una layer a gradiente da sinistra a destra.

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

Cosa rende questo possibile è che non stai cercando di animare la definizione del gradiente stesso. Stai animando una layer a gradiente su un placeholder statico. È più semplice, più facile da ragionare e di solito più stabile su dispositivi diversi.

Ecco un walkthrough visivo dell'effetto in pratica:

Componente animato

A pochi appunti di implementazione sono importanti:

• Usa la clipping: La madre ha bisogno overflow: 'hidden', o il bagliore si diffonderà al di fuori delle angoli arrotondati.
• Tieni stretta la banda: Un layer animato più piccolo è più facile da regolare rispetto a animare tutta la superficie.
• Corrispondi il colore base alla schermata: I caricamenti di scheletro dovrebbero adattarsi al layout circostante, non sembrare un widget separato.

Gli sfumati animati funzionano meglio quando gli utenti li notano appena. Se il bagliore diventa la cosa più rumorosa sulla schermata, sta facendo troppo.

Performance, Accessibilità e Quirks del Platform

Una volta che i gradienti passano dalle schermate di demo alla produzione, i preoccupazioni cambiano. Il code sembra ancora semplice, ma il comportamento di rendering, la leggibilità e la consistenza del platform diventano più importanti dell'effetto iniziale.

Se stai migliorando la risposta dell'app in modo più ampio, questo Guida all'ottimizzazione della prestazione degli app mobili condivide lo stesso mindset: riduci il lavoro inutile, misura sulle reali dispositivi e ottimizza le superfici più viste dagli utenti.

Elenco di controllo della prestazione

Le gradienti nativi sono generalmente efficienti, ma puoi ancora abusarne.

• Preferisci i gradienti rispetto alle grandi immagini decorative: Sono spesso più puliti da inviare e più facili da adattare a diverse dimensioni dello schermo.
• Evita di sovrapporre molti layer a schermo intero: Un unico sfondo di gradiente è sufficiente. Molti gradienti sovrapposti traslucidi più sfocatura più animazione pesante possono essere costosi.
• Memorizza i componenti ripetibili: Se un card di gradiente è utilizzato in una lista, mantieni stabile le proprietà e evita di ricaricarlo a causa dello stato del genitore non correlato.

Una buona regola è mantenere i gradienti strutturali, non eccessivi. Utilizzali per definire le superfici, non ogni riga in un feed denso.

Elenco di controllo dell'accessibilità

I gradienti possono danneggiare la leggibilità velocemente perché il contrasto cambia sulla superficie.

• Testo di prova contro l'area più chiara: Se il testo bianco funziona solo sul lato oscuro della miscela, non funziona.
• Aggiungi uno schermo quando necessario: Un soffuso sovrapposto scuro tra sfondo e testo è spesso meglio che cambiare l'intero paletta.
• Riserva il testo a gradiente per la copia di visualizzazione grande: Si presenta bene sui titoli. È una scelta povera per le etichette piccole, il testo di aiuto o qualsiasi cosa critica per completare una task.

Controlla il punto peggiore sulla gradazione, non il più attraente.

Elenco dei difetti dei dispositivi

iOS e Android rendono spesso lo stesso gradiente in modo molto simile, ma non sempre perfettamente.

Osserva anche il trattamento della barra dello stato e dell'area di sicurezza. Un gradiente bilanciato nel simulatore può sembrare troppo pesante su un dispositivo con un foro se il contenuto e lo sfondo non tengono conto di quell'extra spazio.

Risoluzione dei problemi e Pratiche finali ottimali

Ecco la versione breve che tengo in un appunto del progetto.

• Corrispondi la libreria al flusso di lavoro: expo-linear-gradient per le app gestite da Expo, react-native-linear-gradient per React Native nudo.
• Mantieni i gradienti con un fine preciso: I fondali, i pulsanti, gli overlay e il testo eroe sono casi d'uso forti.
• Controlla la direzione con intenzione: Orizzontale per i pulsanti, diagonale per i fondali decorativi, mascherato solo per il testo grande.
• Progetta per il contenuto, non per gli stati vuoti: Testa con copie reali, icone e trattamento della barra dello stato.
• Tratta la configurazione nuda come configurazione nativa: I Pods, il collegamento e i mock Jest non sono dettagli facoltativi.

Tre fallimenti comuni si ripetono di continuo.

Il gradiente non appare

Causa: il componente non ha una dimensione visibile.

Risoluzione: dargli flex: 1un'altezza esplicita, o un padre con dimensioni. Un gradiente senza box di layout non si renderà in alcun modo significativo.

La compilazione iOS si interrompe dopo l'installazione

Causa: i pods non sono stati installati o il grafo di dipendenza nativa è fuori sincronia.

Risoluzione: esegui pod install in ios, pulisci il cartello di compilazione se necessario, poi ricostruisci l'app. In progetti bare, l'installazione del pacchetto da solo non è mai sufficiente.

I test falliscono con errori di modulo nativo

Causa: Jest sta cercando di caricare il modulo nativo reale.

Risoluzione: simulazione react-native-linear-gradient con react-native-linear-gradient/jest/linear-gradient-mock nel tuo file di configurazione Jest.

Se conservi un'idea da questa guida, conserva questa: il gradiente stesso è facile. La configurazione pronta per la produzione è lo sforzo principale. Una volta che hai scelto la libreria giusta per l'architettura del tuo'app, tutto ciò che segue diventa molto più prevedibile.

Se il tuo team distribuisce app mobili ibride e vuole inviare aggiornamenti di JavaScript, CSS, copia, configurazione e asset senza dover aspettare la revisione della store, Capgo è degno di una visita. Dà alle squadre di CapacitorJS e Electron aggiornamenti in tempo reale controllati, canali di rilascio, protezione del rollback e visibilità dei rilasci senza trasformare il tuo processo di distribuzione in un black box.