Komponentbiblioteker er en samling av tilpassbar og gjenbrukbar kode som kan lages for å passe til en spesifikk apps designmønster. De bidrar til å opprettholde konsistent design på tvers av plattformer og fremskynde utviklingsprosessen.
Her vil du lære hvordan du bruker React Native Elements-komponentbiblioteket når du bygger din neste React Native-app.
Hva er React Native Elements?
React Native Elements (RNE) er en åpen kildekode-innsats fra React Native-utviklere for å lage et komponentbibliotek som kan være nyttig når du bygger Android, iOS og nettapper. I motsetning til mange andre React Native-komponentbibliotekerRNE støtter TypeScript-syntaks.
Biblioteket består av over 30 komponenter som fokuserer på komponentstruktur.
Installere Reactive Native Elements med React Native CLI
Følgende instruksjoner er å installere React Native Elements i et prosjekt opprettet ved hjelp av React Native cli.
Installer React Native Elements i din bare React Native-app ved å kjøre:
npm install @rneui/themed @rneui/base
Du bør også installere react-native-vector-ikoner og safe-area-context:
npm install react-native-vector-icons react-native-safe-area-context
Hvordan installere React Native Elements i et Expo-prosjekt
For å installere React Native Elements i en eksisterende Expo prosjekt, installer pakken og react-native-safe-area-context:
yarn add @rneui/themed @rneui/base react-native-safe-area-context
Oppretthold én pakkebehandling som npm eller garn mens du installerer pakker for å unngå risikoen for avhengighetssammenstøt.
Prosjekter bygget ved hjelp av expo cli har react-native-vector-ikoner installert som standard, så du trenger ikke å installere det.
Styling Single React Native Elements-komponenter
Alle komponentene som er tilgjengelige gjennom RNE har forskjellige rekvisitter for å style komponenten og beholderen til komponenten.
Komponentens beholder er en grunnleggende tag som vikler seg rundt en komponent-tag, som . De taggen er uovervinnelig rundt komponenten og tar en containerstil prop for å bruke visningsstiler.
En komponent kan motta standard styling rekvisitter som farge, typeog størrelse. En komponent kan også motta en unik tilpasset stilrekvisitt for å håndtere komponentens stiler.
Disse er alle eksterne stiler for komponenten.
For eksempel styling av Knapp komponent:
import { View } from "react-native";
import { Button } from "@rneui/themed";
const MyComponent = () => {
return (
<View>
<Button
buttonStyle={{ backgroundColor: "grey" }}
containerStyle={{ width: 150 }}
>
Solid Button
</Button>
<Button
type="outline"
containerStyle={{ width: 150, margin: 10 }}
title="Outline Button"
/>
</View>
);
}
Koden ovenfor viser hvordan du kan bruke stiler på en Button-komponent. One Button bruker en standard type prop, og den andre bruker skikken knappstil rekvisitt. Begge knappene bruker også containerstil prop for å legge til visningsstiler.
Opprette temaer for React Native Elements-komponenter
Å lage temaer for RNE-komponenter er nyttig når du vil bruke en stil på hver forekomst av disse komponentene. Med temaer blir det en enkel oppgave å tilpasse komponentene dine for å passe til ønsket designmønster.
RNE gir en createTheme() funksjon for å style komponenter. Denne funksjonen vil inneholde temastiler som overstyrer hver komponents interne eller standardstiler.
Ring for å lage et tema createTheme() og send de ønskede temastilene som et funksjonsargument:
import { ThemeProvider, createTheme } from '@rneui/themed';
const theme = createTheme({
components: {
Button: {
containerStyle: {
margin: 10,
},
titleStyle: {
color: "black",
},
},
},
});
De Temaleverandør vil bruke stiler på alle komponenter som er pakket inn i den.
Tilbyderen godtar en tema prop som er satt til temaet opprettet ovenfor:
<ThemeProvider theme={theme}>
<Button title="Themed Button" />
</ThemeProvider>
<Button title="Normal Button" />
Temastiler overstyrer interne eller standard komponentstiler, men vil ikke overstyre en ekstern komponentstil.
RNEs rekkefølge plasserer eksterne stiler øverst i hierarkiet.
Eksempel:
const theme = createTheme({
components: {
Button: {
containerStyle: {
margin: 10,
backgroundColor: "red",
},
},
},
});
<ThemeProvider theme={theme}>
<Button title="Themed Button" color={"secondary"}/>
</ThemeProvider>
I koden ovenfor er bakgrunnsfargen til Knapp komponenten vil være sekundær, som er en grønn farge i motsetning til temastilen rød.
EN tema objektet leveres med RNE, og gir en rekke standard fargeverdier ut av esken. RNE tilbyr ulike alternativer som Temaforbruker komponent, inTheme() krok, og makeStyles() krokgenerator for å få tilgang til tema gjenstand.
De Temaforbruker komponent vil pakke komponentene dine gjengitt med en anonym funksjon. Denne anonyme funksjonen tar tema som rekvisitt.
Du kan få tilgang til temaverdiene med en stil rekvisitt:
import React from 'react';
import { Button } from 'react-native';
import { ThemeConsumer } from '@rneui/themed';
const MyComponent = () => (
<ThemeConsumer>
{({ theme }) => (
<Button title="ThemeConsumer" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternativt kan du bruke inTheme() krok for å få tilgang til temaet inne i en komponent.
For eksempel:
import React from 'react';
import { Button } from 'react-native';
import { useTheme } from '@rneui/themed';
const MyComponent = () => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<Button title="useTheme" style={{ color: theme.colors.primary }}/>
</View>
);
};
De makeStyles() krokgenerator ligner på å bruke et stilark for å definere stiler. I likhet med stilarket, skiller det all styling fra utenfor den gjengitte komponenten. Refererer til tema objekt inne i en komponentstilprop.
Utvide temaer med TypeScript
RNE støtter TypeScript-deklarasjoner i appen din, slik at utviklere kan dra nytte av fordelene ved å bruke TypeScript-språk.
Med TypeScripts erklæring sammenslåingkan du utvide temadefinisjoner for å legge til egendefinerte farger og rekvisitter for både RNEs standard- og egendefinerte komponenter.
For å utvide fargene inne i temaobjektet, vil du lage en separat TypeScript.ts fil og deklarer modulen @rneui/tema inne i filen.
Du kan deretter legge til dine egendefinerte farger og spesifisere forventet type:
import '@rneui/themed';
declare module '@rneui/themed' {
export interface Colors {
primaryLight: string;
secondaryLight: string;
}
}
Med denne modulen kan du sende inn dine egendefinerte farger som verdier når du oppretter et tema:
const theme = createTheme({
colors: {
primaryLight: "",
secondaryLight: ""
},
})
Nå er de egendefinerte fargene en del av temaobjektet ditt og kan nås ved hjelp av ThemeProvider, ThemeConsumer, eller inTheme() krok.
RNE-komponenter vs. React Native-komponenter
Komponentbiblioteker som React Native Elements er en fin måte å få en app i gang raskt. De holder fokus på appens struktur i stedet for på detaljene i designet. Bruk av RNE-komponenter over React Native-komponenter bør først og fremst styres av applikasjonens fokus og hvor mye utviklingstid du har.