Probabilmente hai incontrato uno dei due casi.
O il tuo schermo sembra piatto e incompleto, e desideri un sfondo o un pulsante che sembri un prodotto reale invece di un telaio. O hai già provato ad aggiungere una sfumatura React Native e ora ti trovi bloccato nel limbo di configurazione perché metà degli esempi utilizzano Expo e l'altra metà suppongono un progetto nativo nudo.
Quella divisione è dove la maggior parte dei tutorial si ferma a essere utile. Il componente API è semplice. La scelta dell'ambiente non lo è. Una configurazione di sfumatura lineare React Native pulita dipende meno dall' colors prop e altro per stabilire se si è in workflow gestito da Expo o se si tratta di collegamenti nativi, pods e test di mock da gestire da soli.
Tavola dei contenuti
- Perché la tua App React Native ha bisogno di sfumature.
- Scegliere la tua strada Expo vs Bare React Native Setup
- Tecniche di base per sfumature degli elementi di interfaccia utente
- Portare Gradienzi alla Vita con Animazioni
- Performance, Accessibilità e Anomalie di Piattaforma
- Risolvere Problemi e Migliori Pratiche Finali
Perché il tuo App React Native ha bisogno di Gradienzi
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 solidi riempimenti rendono tutto simile a placeholder a meno che il resto del sistema visivo non stia facendo molto lavoro.
A componente React Native con sfumatura lineare risolve questo problema con pochissimo code. Aggiunge profondità, crea una separazione tra le sezioni e dà agli elementi di alta priorità un peso visivo chiaro. Un buon sfondo a sfumatura può rendere una schermata di accesso intenzionale. Un buon pulsante a sfumatura può rendere l'azione principale evidente senza ricorrere a ombre pesanti o bordi troppo rumorosi.
Da nel 2019, 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 uno strumento di tooling UI standard nelle app di produzione, non una decorazione aggiunta alla fine, come notato in questo articolo di adozione delle sfumature React Native.
Cosa fanno bene le sfumature
- Creano profondità: Una schermata con un fondo piatto spesso sembra incompleta. Un blend top-to-bottom leggero fa sentire la superficie stratificata.
- Guidano l'attenzione: Le CTAs primarie, le carte di onboarding e i titoli eroici si distinguono senza aggiungere rumore visivo.
- Sostituisci gli asset di immagine: In molti casi, un gradiente ti dà un tocco di classe senza spedire immagini di sfondo aggiuntive.
Regola pratica: Usa i gradienti dove la gerarchia conta. I fondi, le carte eroiche, le superfici delle CTAs e le sovrapposizioni dei media beneficiano di più. I campi di form, le liste dense e i contenitori di copia di corpo non lo fanno 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 cross-platform per le app mobili si allineano bene con lo stesso modo di pensare: meno asset, più superfici riutilizzabili e sistemi visivi che resistono bene su più schermi.
Scegliere il tuo percorso Expo vs Bare React Native Setup
Questo è il punto di forza che causa più dolore. Il rendering API sembra quasi identico in entrambe le librerie, ma la configurazione non lo è.
Se sei in un'app gestita da Expo, utilizza expo-linear-gradient. Se sei in un'app React Native nuda, utilizza react-native-linear-gradient. Non cercare di sfumare queste linee a meno che non sai esattamente perché lo stai facendo.
Configurazione Expo
Expo è la scelta più facile. L'installazione è lineare, la gestione delle versioni è gestita per te e non devi pensare a collegamenti nativi.
Installa come segue:
npx expo install expo-linear-gradientUsalo 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 vuoi una configurazione veloce, impostazioni sane e pochi bordi nativi. È anche per questo motivo che gli squadre che esplorano flussi di lavoro avanzati di Expo finiscono spesso per utilizzare un cliente di sviluppo Expo per capacità native personalizzate solo quando il percorso gestito non copre più le esigenze dell'applicazione.
Configurazione React Native nudo
React Native nudo ti dà accesso diretto ai moduli nativi, ma tu devi gestire le asperità.
Installa il pacchetto:
npm install react-native-linear-gradientPer iOS, installa pods:
cd ios && pod installUtilizzo 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 nudi solitamente 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 nudi, e la stessa fonte nota problemi ricorrenti con Jest mocking e conflitti di CocoaPods per iOS
Se utilizzi Jest in un'app nuda, 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 nudo funziona bene per gradienti. Non perdonano solo le impostazioni incomplete. La maggior parte delle fallite non sono bug visivi. Sono problemi di collegamento, pods o ambiente di test
Tabella di decisione pratica:
| Tipo di progetto | Libreria | Miglior adattamento |
|---|---|---|
| App gestita da Expo | expo-linear-gradient |
Percorso più veloce, meno configurazione |
| App React Native nuda | react-native-linear-gradient |
Controllo nativo completo |
| App nuda con Jest, + mock | react-native-linear-gradient Richiesto per mantenere stabili i test |
Tecniche di gradient core per gli elementi UI |
Un approccio comune è utilizzare lo stesso piccolo insieme di modelli di gradient ripetuti. Fondi. Bottoni. Titoli. Se questi tre sono solidi, puoi ripeterli su molti schermi.
Una persona che lavora su un laptop che visualizza un'interfaccia di dashboard moderna con elementi di design di gradient colorati.
Un modello mentale utile è questo:
colorscontrolla la palettastarteendcontrollo della direzionelocationscontrolla 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.
Gradiente 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 si sente più dinamico di un verticale di default. Quello è il motivo per cui start={{ x: 0, y: 0 }} e end={{ x: 1, y: 1 }} sono un buon default quando lo schermo è principalmente decorativo.
Non scegliere i colori in isolamento. Testali dietro testo reale, icone e stili di barra di 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 comune qui è mettere il comportamento di tocco direttamente sul gradiente e dimenticare lo stato disabilitato, il feedback di pressione o la consistenza del padding. Mantieni 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ù sfarzoso del set, e è utile quando lo si tiene a freno. Titoli di testa eroici, 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-viewPoi 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'aggiustamento di ogni stop.
Portare i Gradients alla vita con Animazioni
I gradienti statici ti danno un tocco di classe. I gradienti animati ti danno feedback.
L'uso più pratico non è un sfondo sfarzoso. È 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 shimmer si integra anche con altri pattern di movimento. Se la tua app utilizza già icone animate o caricamenti, questo Guida per Lottie in React Native è utile per decidere quando un effetto shimmer a gradiente è sufficiente e quando un asset di animazione più ricco fa più senso.
Un caricamento shimmer 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 nell'app, poi crea un wrapper con overflow: 'hidden' Dentro 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,
},
});Ciò che 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:
Il componente animato
Alcune note di implementazione sono importanti:
- Usare clipping: Il genitore ha bisogno di
overflow: 'hidden'o il bagliore si sposterà al di fuori dei bordi arrotondati. - Tenere stretto il band: Un layer animato più piccolo è più facile da regolare rispetto a animare tutta la superficie.
- Corrispondere il colore base alla schermata: I caricamenti di scheletro dovrebbero adattarsi al layout circostante, non sembrare un widget separato.
I gradienti 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 di piattaforma
Una volta che i gradienti passano dalle schermate di demo alla produzione, le preoccupazioni cambiano. Il code sembra ancora semplice, ma il comportamento di rendering, la leggibilità e la consistenza della piattaforma iniziano a contare più dell'effetto iniziale.
Se si sta 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 che gli utenti vedono di più.
Elenco di controllo della prestazione
Gli sfumati nativi sono generalmente efficienti, ma puoi ancora abusarne.
- Preferisci gli sfumati 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 sfumato di sfondo è bene. Più sfumati sovrapposti trasparenti più blur più animazione pesante possono essere costosi.
- Memorizza i componenti ripetibili: Se un card sfumato viene utilizzato in una lista, mantieni stabile le proprietà e evita di ricaricarlo a causa dello stato del genitore non correlato.
Una buona regola è mantenere gli sfumati 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 a causa dei cambiamenti di contrasto sulla superficie.
- Testa il testo contro l'area più chiara: Se il testo bianco funziona solo sul lato oscuro della miscela, non funziona.
- Aggiungi uno schermo quando serve: Un soffuso sovrapposizione scura tra sfondo e testo è spesso meglio che cambiare l'intero paletta.
- Riserva il testo a gradienti 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 capricci delle piattaforme
iOS e Android rendono spesso la stessa gradazione in modo molto simile, ma non sempre perfettamente.
| Problema | Cosa aiuta di solito |
|---|---|
| Il gradiente appare diverso su piattaforme diverse | Usa meno colori e un contrasto più chiaro tra i punti |
| I bordi arrotondati non tagliano il gradiente | Metti overflow: 'hidden' sul contenitore |
| Il gradiente non si mostra affatto | Controlla la larghezza, l'altezza o flex: 1 prima |
Guarda anche il tuo barra dello stato e il trattamento dell'area di sicurezza. Un gradiente che sembra 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 di miglioramento
Ecco la versione breve che tengo in una nota del progetto.
- Corrispondi la libreria al flusso di lavoro:
expo-linear-gradientper le app gestite da Expo,react-native-linear-gradientper React Native senza bare. - Mantieni i gradienti con un fine preciso: I fondi, 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 fondi decorativi, mascherato solo per il testo grande.
- Progetta per il contenuto, non per gli stati vuoti: Testa con copia reale, icone e trattamento della barra dello stato.
- Tratta la configurazione bare come configurazione nativa: I Pods, il collegamento e i mock Jest non sono dettagli facoltativi.
Tre fallimenti comuni si ripresentano ripetutamente.
Il gradiente non appare
Causa: il componente non ha una dimensione visibile.
Risoluzione: dargli flex: 1, un'altezza esplicita, o un padre con dimensioni. Un gradiente senza box di layout non si renderà in alcun modo significativo.
La compilazione per 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 cartellone di compilazione se necessario, poi ricostruisci l'app. In progetti bare, l'installazione del pacchetto da solo non è quasi 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 Inserisci il 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 sviluppa app mobili ibride e vuole inviare aggiornamenti di JavaScript, CSS, copia, configurazione e asset senza dover attendere la revisione della store, Capgo è da considerare. 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.
