Komponenttikirjastot ovat kokoelma mukautettavaa ja uudelleenkäytettävää koodia, joka voidaan muokata tietyn sovelluksen suunnittelumallin mukaan. Ne auttavat säilyttämään yhtenäisen suunnittelun eri alustoilla ja nopeuttavat kehitysprosessia.

Täältä opit käyttämään React Native Elements -komponenttikirjastoa, kun rakennat seuraavaa React Native -sovellustasi.

Mikä on React Native Elements?

React Native Elements (RNE) on React Nativen kehittäjien avoimen lähdekoodin yritys luoda komponenttikirjasto, josta voi olla hyötyä luotaessa Android-, iOS- ja verkkosovelluksia. Toisin kuin monet muut React Native -komponenttikirjastot, RNE tukee TypeScript-syntaksia.

Kirjasto koostuu yli 30 komponentista, jotka keskittyvät komponenttien rakenteeseen.

Reaktiivisten alkuperäisten elementtien asentaminen React Native CLI: n avulla

Seuraavat ohjeet ovat React Native Elements -elementtien asentaminen projektiin, joka on luotu React Native -kli: llä.

Asenna React Native Elements paljaaseen React Native -sovellukseesi suorittamalla:

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

Sinun tulee myös asentaa react-native-vector-icons ja safe-area-context:

npm Asentaa reagoi-syntyperäinen-vektori-kuvakkeet reagoivat-syntyperäinen-turvallinen-alue-yhteydessä

Kuinka asentaa React Native Elements Expo-projektiin

Asenna React Native Elements olemassa olevaan Expo projekti, asenna paketti ja react-native-safe-area-context:

lanka lisää @rneui/themed @rneui/base reagoi-syntyperäinen-turva-alue-konteksti

Ylläpidä yhtä paketinhallintaohjelmaa, kuten npm tai yarn, kun asennat paketteja välttääksesi riippuvuusristiriitojen riskiä.

Expo cli -sovelluksella rakennetuissa projekteissa on oletusarvoisesti asennettuna react-native-vector-ikonit, joten sinun ei tarvitse asentaa sitä.

Single React Native Elements -komponenttien muotoilu

Kaikki RNE: n kautta saatavilla olevat komponentit sisältävät erilaisia ​​​​rekvisiitta komponentin ja komponentin säiliön muotoiluun.

Komponentin säiliö on perus -tunnisteen kääriminen komponenttitunnisteen ympärille, kuten. The tag on voittamaton komponentin ympärillä ja vie a containerStyle ehdotus näkymätyylien soveltamiseen.

Komponentti voi vastaanottaa oletusmuotoilun rekvisiitta, kuten väri, tyyppi, ja koko. Komponentti voi myös saada ainutlaatuisen mukautetun tyylisubjektin käsittelemään komponentin tyylejä.

Nämä ovat kaikki komponentin ulkoisia tyylejä.

Esimerkiksi muotoilu Painike komponentti:

tuonti { Näytä } alkaen "reagoi-natiivi";
tuonti { Button } alkaen "@rneui/teema";
konst MyComponent = () => {
palata (
<Näytä>
<Painike
 buttonStyle={{ taustaväri: "harmaa" }}
 containerStyle={{leveys: 150 }}
>
 Kiinteä painike
</Button>
<Painike
 tyyppi="ääriviivat"
 containerStyle={{ leveys: 150, marginaali: 10 }}
 otsikko="Outline-painike"
 />
</View>
 );
}

Yllä oleva koodi näyttää, kuinka voit käyttää tyylejä Button-komponenttiin. Yksi painike käyttää oletusasetusta tyyppi prop, ja toinen käyttää mukautettua buttonStyle prop. Molemmat painikkeet käyttävät myös containerStyle ehdotus näkymätyylien lisäämiseen.

Teemojen luominen React Native Elements -komponenteille

Teemojen luominen RNE-komponenteille on hyödyllistä, kun haluat käyttää tyyliä näiden komponenttien jokaiseen esiintymään. Teemojen avulla komponenttien räätälöiminen halutun mallin mukaan on helppoa.

RNE tarjoaa a luo teema() toiminto komponenttien muotoiluun. Tämä toiminto sisältää teematyylejä, jotka ohittavat jokaisen komponentin sisäiset tai oletustyylit.

Voit luoda teeman soittamalla luo teema() ja välitä halutut teematyylit funktioargumenttina:

tuonti { ThemeProvider, createTheme } alkaen '@rneui/teema';
konst teema = CreateTheme({
 komponentit: {
 Painike: {
 containerStyle: {
 marginaali: 10,
 },
 titleStyle: {
 väri: "musta",
 },
 },
 },
});

The ThemeProvider soveltaa tyylejä mihin tahansa sen sisään käärittyyn komponenttiin.

Palveluntarjoaja hyväksyy a teema prop, joka on asetettu yllä luotuun teemaan:

<ThemeProvider theme={theme}>
<Painikkeen otsikko ="Teemapainike" />
</ThemeProvider>
<Painikkeen otsikko ="Normaali painike" />
2 kuvaa

Teematyylit ohittavat sisäiset tai oletustyylit, mutta eivät ohita ulkoista komponenttityyliä.

RNE: n tärkeysjärjestys asettaa ulkoiset tyylit hierarkian huipulle.

Esimerkki:

// Teema
konst teema = CreateTheme({
 komponentit: {
 Painike: {
 containerStyle: {
 marginaali: 10,
 taustaväri: "punainen",
 },
 },
 },
});
//Component
<ThemeProvider theme={theme}>
<Painikkeen otsikko ="Teemapainike" väri={"toissijainen"}/>
</ThemeProvider>

Yllä olevassa koodissa taustaväri Painike komponentti on toissijainen, mikä on vihreä väri toisin kuin teematyyli punainen.

A teema objekti toimitetaan RNE: n kanssa, joka tarjoaa lukuisia oletusväriarvoja heti valmiina. RNE tarjoaa erilaisia ​​vaihtoehtoja, kuten TeemaKuluttaja komponentti, useTheme() koukku ja makeStyles() koukkugeneraattori päästäksesi käsiksi teema esine.

The TeemaKuluttaja komponentti kääri nimettömällä toiminnolla renderoidut komponentit. Tämä anonyymi toiminto kestää teema rekvisiittana.

Pääset käsiksi teeman arvoihin painamalla a tyyli prop:

tuonti Reagoi alkaen "reagoi";
tuonti { Button } alkaen 'react-native';
tuonti { ThemeConsumer } alkaen '@rneui/teema';
konst MyComponent = () => (
<TeemaKuluttaja>
 {({ teema }) => (
<Painikkeen otsikko ="TeemaKuluttaja" style={{ color: theme.colors.primary }} />
 )}
</ThemeConsumer>
)

Vaihtoehtoisesti voit käyttää useTheme() koukku päästäksesi teemaan komponentin sisällä.

Esimerkiksi:

tuonti Reagoi alkaen "reagoi";
tuonti { Button } alkaen 'react-native';
tuonti { käytä teemaa } alkaen '@rneui/teema';
konst MyComponent = () => {
konst { teema } = useTheme();
palata (
<Näytä style={styles.container}>
<Painikkeen otsikko ="käytä teemaa" style={{ color: theme.colors.primary }}/>
</View>
 );
};

The makeStyles() koukkugeneraattori on samanlainen kuin tyylisivun käyttäminen tyylien määrittämiseen. Kuten tyylisivu, se erottaa kaikki tyylit renderoidun komponentin ulkopuolelta. Viitaten teema esineen komponenttityylin rekvisiitta.

Teemojen laajentaminen TypeScriptillä

RNE tukee TypeScript-määrityksiä sovelluksessasi, jolloin kehittäjät voivat hyödyntää TypeScript-kielen käytön edut.

TypeScriptien kanssa julistusten yhdistäminen, voit laajentaa teemamäärityksiä lisätäksesi mukautettuja värejä ja rekvisiitta sekä RNE: n oletus- että mukautetuille komponenteille.

Voit laajentaa värejä teemaobjektin sisällä luomalla erillisen TypeScript.ts tiedosto ja ilmoittaa moduuli @rneui/teema tiedoston sisällä.

Voit sitten lisätä mukautettuja värejäsi ja määrittää niiden odotetun tyypin:

// **TypeScript.ts**
tuonti '@rneui/themed';
julistaa moduuli '@rneui/teemalla' {
 viedä käyttöliittymävärit{
 ensisijainen valo: merkkijono;
 toissijainen valo: merkkijono; 
 }
}

Tämän moduulin avulla voit välittää mukautettuja värejäsi arvoina luodessasi teemaa:

konst teema = CreateTheme({
 värit: {
 ensisijainen valo: "",
	toissijainen valo: ""
 },
})

Nyt mukautetut värit ovat osa teemaobjektiasi ja niitä voidaan käyttää käyttämällä ThemeProvider, ThemeConsumer, tai useTheme() koukku.

RNE-komponentit vs. Reagoi alkuperäiskomponentteihin

Komponenttikirjastot, kuten React Native Elements, ovat loistava tapa saada sovellus nopeasti käyntiin. Ne keskittyvät sovelluksen rakenteeseen suunnittelun yksityiskohtien sijaan. RNE-komponenttien käyttäminen React Native -komponenttien sijaan tulee ohjata ensisijaisesti sovelluksesi painopisteen ja kehitysajan määrän mukaan.