Le librerie di componenti sono una raccolta di codice personalizzabile e riutilizzabile che può essere creato per adattarsi al modello di progettazione di un'app specifica. Aiutano a mantenere un design coerente su tutte le piattaforme e ad accelerare il processo di sviluppo.
Qui imparerai come utilizzare la libreria di componenti React Native Elements durante la creazione della tua prossima app React Native.
Cos'è React Native Elements?
React Native Elements (RNE) è uno sforzo open source degli sviluppatori React Native per creare una libreria di componenti che può essere utile durante la creazione di app Android, iOS e Web. A differenza di molti altre librerie di componenti React Native, RNE supporta la sintassi TypeScript.
La libreria è composta da oltre 30 componenti che si concentrano sulla struttura dei componenti.
Installazione di elementi nativi reattivi con la CLI React Native
Le seguenti istruzioni servono per installare React Native Elements in un progetto creato utilizzando React Native cli.
Installa React Native Elements nella tua semplice app React Native eseguendo:
installazione npm @rneui/themed @rneui/base
Dovresti anche installare react-native-vector-icons e safe-area-context:
npm installare reagire-nativo-icone-vettoriali reagiscono-nativo-sicuro-la zona-contesto
Come installare React Native Elements in un progetto Expo
Per installare React Native Elements in un file esistente Expo project, installa il pacchetto e react-native-safe-area-context:
filato aggiungere @rneui/themed @rneui/reazione base-nativo-contesto-area-sicura
Mantieni un gestore di pacchetti come npm o yarn durante l'installazione dei pacchetti per evitare il rischio di conflitti tra dipendenze.
I progetti creati utilizzando expo cli hanno le icone vettoriali native di reazione installate per impostazione predefinita, quindi non è necessario installarlo.
Styling dei componenti degli elementi nativi Single React
Tutti i componenti disponibili tramite RNE accettano vari oggetti di scena per lo styling del componente e del contenitore del componente.
Il contenitore del componente è un basic tag che avvolge un tag di componente, come il. IL tag è invincibile attorno al componente e accetta un file containerStyle prop per applicare gli stili di visualizzazione.
Un componente può ricevere oggetti di stile predefiniti come colore, tipo, E misurare. Un componente può anche ricevere un oggetto di stile personalizzato univoco per gestire gli stili del componente.
Questi sono tutti stili esterni per il componente.
Ad esempio, lo styling del file Pulsante componente:
importare { Visualizzazione } da "nativo della reazione";
importare { Pulsante } da "@rneui/a tema";
cost MioComponente = () => {
ritorno (
<Visualizzazione>
<Pulsante
buttonStyle={{ backgroundColor: "grigio" }}
containerStyle={{ larghezza: 150 }}
>
Pulsante solido
</Button>
<Pulsante
tipo="contorno"
containerStyle={{ larghezza: 150, margine: 10 }}
titolo="Pulsante Contorno"
/>
</View>
);
}
Il codice precedente mostra come applicare gli stili a un componente Button. One Button utilizza un valore predefinito tipo prop, e l'altro usa il custom pulsanteStile puntello. Entrambi i pulsanti usano anche il containerStyle prop per aggiungere stili di visualizzazione.
Creazione di temi per componenti React Native Elements
La creazione di temi per i componenti RNE è utile quando si desidera applicare uno stile a ogni istanza di tali componenti. Con i temi, personalizzare i componenti per adattarli al modello di progettazione desiderato diventa un compito facile.
RNE fornisce a createma() funzione per modellare i componenti. Questa funzione manterrà gli stili del tema che sostituiscono gli stili interni o predefiniti di ogni componente.
Per creare un tema, chiama createma() e passa gli stili del tema desiderati come argomento della funzione:
importare { ThemeProvider, createTheme } da '@rneui/a tema';
cost tema = creaTema({
componenti: {
Pulsante: {
stile contenitore: {
margine: 10,
},
titleStile: {
colore: "nero",
},
},
},
});
IL ThemeProvider applicherà gli stili a qualsiasi componente racchiuso al suo interno.
Il fornitore accetta a tema prop che è impostato sul tema creato sopra:
<Tema ThemeProvider={tema}>
<Titolo pulsante="Pulsante a tema" />
</ThemeProvider>
<Titolo pulsante="Pulsante normale" />
Gli stili del tema sostituiscono gli stili dei componenti interni o predefiniti, ma non sostituiscono uno stile del componente esterno.
L'ordine di precedenza di RNE pone gli stili esterni in cima alla gerarchia.
Esempio:
// Tema
cost tema = creaTema({
componenti: {
Pulsante: {
stile contenitore: {
margine: 10,
colore di sfondo: "rosso",
},
},
},
});
//Component
<Tema ThemeProvider={tema}>
<Titolo pulsante="Pulsante a tema" colore={"secondario"}/>
</ThemeProvider>
Nel codice sopra, il colore di sfondo del file Pulsante componente sarà secondario, che è un colore verde in contrasto con lo stile del tema rosso.
UN tema oggetto viene spedito con RNE, fornendo numerosi valori di colore predefiniti pronti all'uso. RNE offre varie opzioni come il TemaConsumatore componente, usaTema() gancio, e makeStyles() generatore di hook per accedere al file tema oggetto.
IL TemaConsumatore component avvolgerà i tuoi componenti renderizzati con una funzione anonima. Questa funzione anonima richiede tema come oggetto di scena.
Puoi accedere ai valori del tema con a stile puntello:
importare Reagire da 'reagire';
importare { Pulsante } da 'nativo della reazione';
importare { ThemeConsumer } da '@rneui/a tema';
cost MioComponente = () => (
<TemaConsumatore>
{({tema}) => (
<Titolo pulsante="TemaConsumatore" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
In alternativa, puoi utilizzare il usaTema() hook per accedere al tema all'interno di un componente.
Per esempio:
importare Reagire da 'reagire';
importare { Pulsante } da 'nativo della reazione';
importare { usaTema } da '@rneui/a tema';cost MioComponente = () => {
cost {tema} = useTheme();
ritorno (
<Visualizza stile={styles.container}>
<Titolo pulsante="useTheme" style={{ color: theme.colors.primary }}/>
</View>
);
};
IL makeStyles() hook generator è simile all'utilizzo di un foglio di stile per definire gli stili. Come il foglio di stile, separa qualsiasi stile dall'esterno del componente renderizzato. Fare riferimento al tema oggetto all'interno di un puntello stile componenti.
Estensione dei temi con TypeScript
RNE supporta le dichiarazioni TypeScript nella tua app, consentendo agli sviluppatori di trarne vantaggio i vantaggi dell'utilizzo del linguaggio TypeScript.
Con dattiloscritti fusione delle dichiarazioni, puoi estendere le definizioni del tema per aggiungere colori e oggetti di scena personalizzati sia per i componenti predefiniti che per quelli personalizzati di RNE.
Per estendere i colori all'interno dell'oggetto tema, creerai un separato TypeScript.ts file e dichiarare il modulo @rneui/a tema all'interno del file.
Puoi quindi andare avanti per aggiungere i tuoi colori personalizzati e specificare il tipo previsto:
// **TypeScript.ts**importare '@rneui/themed';
dichiarare modulo '@rneui/a tema' {
esportare interfacciaColori{
primaryLight: stringa;
secondaryLight: stringa;
}
}
Con questo modulo, puoi passare i tuoi colori personalizzati come valori durante la creazione di un tema:
cost tema = creaTema({
colori: {
luce primaria: "",
secondarioLuce: ""
},
})
Ora i colori personalizzati fanno parte dell'oggetto tema e sono accessibili utilizzando ThemeProvider, ThemeConsumer, o il usaTema() gancio.
Componenti RNE vs. Reagisci ai componenti nativi
Le librerie di componenti come React Native Elements sono un ottimo modo per far funzionare rapidamente un'app. Mantengono la tua attenzione sulla struttura dell'app piuttosto che sui dettagli del design. L'utilizzo dei componenti RNE rispetto ai componenti React Native dovrebbe essere guidato principalmente dall'obiettivo della tua applicazione e dal tempo di sviluppo che hai a disposizione.
