Komponentide teegid on kohandatavate ja korduvkasutatavate koodide kogum, mida saab kohandada konkreetse rakenduse kujundusmustriga. Need aitavad säilitada ühtlast disaini platvormidel ja kiirendavad arendusprotsessi.

Siit saate teada, kuidas kasutada React Native Elementsi komponenditeeki järgmise React Native rakenduse loomisel.

Mis on React Native Elements?

React Native Elements (RNE) on React Native'i arendajate avatud lähtekoodiga töö, mille eesmärk on luua komponentide kogu, mis võib olla kasulik Androidi, iOS-i ja veebirakenduste loomisel. Erinevalt paljudest muud Reacti algkomponentide teegid, RNE toetab TypeScripti süntaksit.

Teek koosneb enam kui 30 komponendist, mis keskenduvad komponentide struktuurile.

Reaktiivsete algelementide installimine React Native CLI-ga

Järgmised juhised on mõeldud React Native Elementsi installimiseks projekti, mis on loodud React Native Cli abil.

Installige React Native Elements oma tühja rakendusse React Native, käivitades:

npm installimine @rneui/themed @rneui/base
instagram viewer

Peaksite installima ka reaktiivse algse vektori ikoonid ja turvalise ala konteksti:

npm installida reageerima-emakeelena-vektori-ikoonid reageerivad-emakeelena-ohutu-ala-Sisu

Kuidas installida Expo projekti React Native Elements

React Native Elementsi installimiseks olemasolevasse Expo projekt, installige pakett ja reageerige-native-safe-area-context:

lisa lõng @rneui/themed @rneui/base reaktsioon-emakeelena-turvaala-kontekst

Säilitage pakettide installimise ajal ühte paketihaldurit (nt npm või yarn), et vältida sõltuvuste kokkupõrkeid.

Expo cli abil loodud projektidesse on vaikimisi installitud react-native-vector-ikoonid, nii et te ei pea seda installima.

Single React Native Elements komponentide kujundamine

Kõik RNE kaudu saadaolevad komponendid kasutavad komponendi ja komponendi konteineri kujundamiseks erinevaid rekvisiite.

Komponendi konteiner on põhiline sildi mähkimine komponendisildi ümber, nagu. The silt on komponendi ümber võitmatu ja võtab a konteineri stiil rekvisiidid vaatestiilide rakendamiseks.

Komponent võib vastu võtta vaikestiili rekvisiite, nagu näiteks värvi, tüüpja suurus. Komponent võib saada ka ainulaadse kohandatud stiili rekvisiidi, et käsitleda komponendi stiile.

Need kõik on komponendi välised stiilid.

Näiteks stiili kujundamine Nupp komponent:

importida { Vaata } alates "reageerivad-native";
importida { Button } alates "@rneui/teemaline";
konst Minu komponent = () => {
tagasi (
<Vaade>
<Nupp
 buttonStyle={{ taustavärv: "hall" }}
 containerStyle={{ laius: 150 }}
>
 Tahke nupp
</Button>
<Nupp
 tüüp="ülevaade"
 containerStyle={{ laius: 150, veeris: 10 }}
 pealkiri="Kontuuri nupp"
 />
</View>
 );
}

Ülaltoodud kood näitab, kuidas saate nupukomponendile stiile rakendada. Üks nupp kasutab vaikeseadet tüüp prop ja teine ​​kasutab kohandatud nupu Stiil prop. Mõlemad nupud kasutavad ka konteineri stiil rekvisiit vaate stiilide lisamiseks.

Teemade loomine React Native Elementsi komponentide jaoks

RNE komponentide jaoks teemade loomine on kasulik, kui soovite nende komponentide igale eksemplarile stiili rakendada. Teemade abil on komponentide kohandamine soovitud disainimustri järgi lihtne ülesanne.

RNE pakub a loo teema() funktsioon komponentide kujundamiseks. See funktsioon sisaldab teemastiile, mis alistavad iga komponendi sisemised või vaikelaadid.

Teema loomiseks helistage loo teema() ja edasta soovitud teemastiilid funktsiooni argumendina:

importida { ThemeProvider, createTheme } alates '@rneui/teemaline';
konst theme = createTheme({
 komponendid: {
 Nupp: {
 konteineri stiil: {
 marginaal: 10,
 },
 titleStyle: {
 värv: "must",
 },
 },
 },
});

The Teemapakkuja rakendab stiile mis tahes selle sisse pakitud komponendile.

Pakkuja aktsepteerib a teema rekvisiit, mis on seatud ülal loodud teemale:

<ThemeProvider theme={theme}>
<Nupu pealkiri="Teemaline nupp" />
</ThemeProvider>
<Nupu pealkiri="Tavaline nupp" />
2 pilti

Teema stiilid alistavad sisemised või vaikekomponentide stiilid, kuid ei alista välist komponendi stiili.

RNE tähtsusjärjestus asetab välised stiilid hierarhia tippu.

Näide:

// Teema
konst theme = createTheme({
 komponendid: {
 Nupp: {
 konteineri stiil: {
 marginaal: 10,
 taustavärv: "punane",
 },
 },
 },
});
//Component
<ThemeProvider theme={theme}>
<Nupu pealkiri="Teemaline nupp" värv={"teisejärguline"}/>
</ThemeProvider>

Ülaltoodud koodis on taustavärv Nupp komponent on sekundaarne, mis on roheline värv, mitte punase teemastiil.

A teema objekt tarnitakse koos RNE-ga, pakkudes arvukalt vaikevärviväärtusi. RNE pakub erinevaid võimalusi, näiteks Teema Tarbija komponent, useTheme() konks ja makeStyles() konksu generaator juurdepääsuks teema objektiks.

The Teema Tarbija komponent mähib teie anonüümse funktsiooniga renderdatud komponendid. See anonüümne funktsioon võtab teema rekvisiidina.

Teema väärtustele pääsete juurde nupuga a stiilis prop:

importida Reageerige alates 'reageerida';
importida { Button } alates 'react-native';
importida { ThemeConsumer } alates '@rneui/teemaline';
konst Minu komponent = () => (
<Teema Tarbija>
 {({ teema }) => (
<Nupu pealkiri="Teema Tarbija" style={{ color: theme.colors.primary }} />
 )}
</ThemeConsumer>
)

Teise võimalusena võite kasutada useTheme() konks, et pääseda juurde komponendi sees olevale teemale.

Näiteks:

importida Reageerige alates 'reageerida';
importida { Button } alates 'react-native';
importida { useTheme } alates '@rneui/teemaline';
konst Minu komponent = () => {
konst {teema} = useTheme();
tagasi (
<Kuva style={styles.container}>
<Nupu pealkiri="kasutage teemat" style={{ color: theme.colors.primary }}/>
</View>
 );
};

The makeStyles() konksu generaator sarnaneb stiililehe kasutamisega stiilide määratlemiseks. Nagu stiilileht, eraldab see kõik stiilid väljastpoolt teie renderdatud komponenti. Viidates teema objekt komponentide stiilis rekvisiidis.

Teemade laiendamine TypeScripti abil

RNE toetab teie rakenduses TypeScripti deklaratsioone, võimaldades arendajatel seda ära kasutada TypeScripti keele kasutamise eelised.

TypeScriptidega deklaratsiooni liitmine, saate laiendada teemade määratlusi, et lisada kohandatud värve ja rekvisiite nii RNE vaike- kui ka kohandatud komponentidele.

Teemaobjekti värvide laiendamiseks loote eraldi TypeScript.ts faili ja deklareerige moodul @rneui/teemaline faili sees.

Seejärel saate jätkata kohandatud värvide lisamisega ja nende eeldatava tüübi määramisega.

// **TypeScript.ts**
importida '@rneui/themed';
kuulutama moodul '@rneui/teemaline' {
 eksportida liidesVärvid{
 primaarvalgus: string;
 sekundaarvalgus: string; 
 }
}

Selle mooduli abil saate teema loomisel väärtustena edastada kohandatud värve.

konst theme = createTheme({
 värvid: {
 esmane valgus: "",
	sekundaarne valgus: ""
 },
})

Nüüd on kohandatud värvid osa teie teemaobjektist ja neile pääseb juurde kasutades ThemeProvider, ThemeConsumer, või useTheme() konks.

RNE komponendid vs. Reageerige algkomponentidele

Komponentide teegid, nagu React Native Elements, on suurepärane viis rakenduse kiireks käivitamiseks. Need keskenduvad pigem rakenduse struktuurile kui disaini üksikasjadele. RNE komponentide kasutamine React Native'i komponentide asemel peaks lähtuma peamiselt teie rakenduse fookusest ja sellest, kui palju teil on arendusaega.