Komponentų bibliotekos yra tinkinamo ir daugkartinio naudojimo kodo rinkinys, kurį galima pritaikyti prie konkrečios programos dizaino modelio. Jie padeda išlaikyti nuoseklų dizainą visose platformose ir pagreitina kūrimo procesą.
Čia sužinosite, kaip naudoti „React Native Elements“ komponentų biblioteką kuriant kitą „React Native“ programą.
Kas yra „React Native Elements“?
„React Native Elements“ (RNE) yra atvirojo kodo „React Native“ kūrėjų pastangos sukurti komponentų biblioteką, kuri gali būti naudinga kuriant „Android“, „iOS“ ir žiniatinklio programas. Skirtingai nuo daugelio kitos „React Native“ komponentų bibliotekos, RNE palaiko TypeScript sintaksę.
Biblioteką sudaro daugiau nei 30 komponentų, kuriuose pagrindinis dėmesys skiriamas komponentų struktūrai.
„Reactive Native Elements“ diegimas naudojant „React Native“ CLI
Šios instrukcijos yra skirtos įdiegti „React Native Elements“ projekte, sukurtame naudojant „React Native Cli“.
Įdiekite „React Native Elements“ savo „React Native“ programėlėje paleisdami:
npm diegimas @rneui/themed @rneui/base
Taip pat turėtumėte įdiegti react-native-vektori-piktogramas ir saugios srities kontekstą:
npm diegti reaguoti -gimtoji- vektorinės piktogramos reaguoja -gimtoji-saugus- plotas-kontekste
Kaip įdiegti „React“ vietinius elementus „Expo“ projekte
Norėdami įdiegti „React Native Elements“ esamame Expo projektą, įdiekite paketą ir react-native-safe-area-context:
verpalų pridėti @rneui/themed @rneui/bazinė reakcija-gimtoji-saugios zonos kontekstas
Diegdami paketus palaikykite vieną paketų tvarkyklę, pvz., npm arba yarn, kad išvengtumėte priklausomybės susidūrimų rizikos.
Projektuose, sukurtuose naudojant expo cli, pagal numatytuosius nustatymus įdiegtos react-native-vector-icons, todėl jums jų nereikia diegti.
Single React Native Elements komponentų modeliavimas
Visi komponentai, kuriuos galima įsigyti per RNE, turi įvairius rekvizitus, skirtus komponentui ir komponento talpyklai formuoti.
Komponento talpykla yra pagrindinė žyma, apvyniojama aplink komponento žymą, pvz.,. The žyma yra nenugalima aplink komponentą ir užima a konteinerio stilius rekvizitas, skirtas taikyti peržiūros stilius.
Komponentas gali gauti numatytuosius stiliaus rekvizitus, pvz spalva, tipo, ir dydis. Komponentas taip pat gali gauti unikalų tinkinto stiliaus rekvizitą, kad būtų galima tvarkyti komponento stilius.
Tai yra išoriniai komponento stiliai.
Pavyzdžiui, stiliaus formavimas Mygtukas komponentas:
importuoti {Žiūrėti} iš „reaguoti-gimtoji“;
importuoti { Mygtukas } iš "@rneui/themed";
konst Mano komponentas = () => {
grąžinti (
<Žiūrėti>
<Mygtukas
buttonStyle={{ fono spalva: "pilka" }}
containerStyle={{ plotis: 150 }}
>
Tvirtas mygtukas
</Button>
<Mygtukas
tipas ="kontūras"
containerStyle={{ plotis: 150, paraštė: 10}}
pavadinimas ="Kontūro mygtukas"
/>
</View>
);
}
Aukščiau pateiktas kodas rodo, kaip galite taikyti stilius mygtuko komponentui. Vienas mygtukas naudoja numatytuosius nustatymus tipo rekvizitas, o kitas naudoja papročius mygtukasStilius prop. Abu mygtukai taip pat naudoja konteinerio stilius rekvizitas, kad pridėtumėte peržiūros stilių.
„React Native Elements“ komponentų temų kūrimas
RNE komponentų temų kūrimas yra naudingas, kai norite pritaikyti stilių kiekvienam tų komponentų egzemplioriui. Naudojant temas, lengva užduotis pritaikyti komponentus, kad jie atitiktų norimą dizaino modelį.
RNE suteikia a sukurti temą () funkcija stilizuoti komponentus. Ši funkcija išlaikys temų stilius, kurie nepaisys kiekvieno komponento vidinio arba numatytųjų stilių.
Norėdami sukurti temą, skambinkite sukurti temą () ir perduoti norimus temų stilius kaip funkcijos argumentą:
importuoti { ThemeProvider, createTheme } iš „@rneui/themed“;
konst tema = sukurtiTema({
komponentai: {
Mygtukas: {
konteinerio stilius: {
paraštė: 10,
},
titleStyle: {
spalva: "juodas",
},
},
},
});
The ThemeProvider pritaikys stilius bet kuriam jo viduje esančiam komponentui.
Teikėjas priima a tema rekvizitas, nustatytas pagal aukščiau sukurtą temą:
<ThemeProvider theme={theme}>
<Mygtuko pavadinimas ="Teminis mygtukas" />
</ThemeProvider>
<Mygtuko pavadinimas ="Įprastas mygtukas" />
Temos stiliai nepaiso vidinių arba numatytųjų komponentų stilių, bet nepaisys išorinio komponento stiliaus.
Pagal RNE pirmumo tvarką išoriniai stiliai yra hierarchijos viršuje.
Pavyzdys:
// Tema
konst tema = sukurtiTema({
komponentai: {
Mygtukas: {
konteinerio stilius: {
paraštė: 10,
fono spalva: "raudona",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Mygtuko pavadinimas ="Teminis mygtukas" spalva={"antraeilis"}/>
</ThemeProvider>
Aukščiau pateiktame kode fono spalva Mygtukas komponentas bus antrinis, o tai yra žalia spalva, o ne raudonos temos stilius.
A tema Objektas pristatomas kartu su RNE, suteikiant daugybę numatytųjų spalvų reikšmių. RNE siūlo įvairias parinktis, tokias kaip ThemeConsumer komponentas, useTheme() kabliukas ir makeStyles () kablio generatorius, kad pasiektumėte tema objektas.
The ThemeConsumer komponentas apvynios jūsų komponentus, pateiktus naudojant anoniminę funkciją. Ši anoniminė funkcija trunka tema kaip rekvizitas.
Temos reikšmes galite pasiekti naudodami a stilius rekvizitas:
importuoti Reaguoti iš „reaguoti“;
importuoti { Mygtukas } iš 'react-native';
importuoti { ThemeConsumer } iš „@rneui/themed“;
konst Mano komponentas = () => (
<ThemeConsumer>
{({ tema }) => (
<Mygtuko pavadinimas ="ThemeConsumer" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Arba galite naudoti useTheme() kabliukas, kad pasiektumėte temą komponento viduje.
Pavyzdžiui:
importuoti Reaguoti iš „reaguoti“;
importuoti { Mygtukas } iš 'react-native';
importuoti { useTheme } iš „@rneui/themed“;konst Mano komponentas = () => {
konst {tema} = useTheme();
grąžinti (
<Peržiūrėti style={styles.container}>
<Mygtuko pavadinimas ="naudokite temą" style={{ color: theme.colors.primary }}/>
</View>
);
};
The makeStyles () kablio generatorius yra panašus į stiliaus lapo naudojimą stiliams apibrėžti. Kaip ir stiliaus lapas, jis atskiria bet kokį stilių nuo pateikto komponento išorės. Darant nuorodą į tema objektas komponentų stiliaus rekvizito viduje.
Temų išplėtimas naudojant TypeScript
RNE palaiko „TypeScript“ deklaracijas jūsų programoje, todėl kūrėjai gali pasinaudoti „TypeScript“ kalbos naudojimo pranašumai.
Su TypeScripts deklaracijų sujungimas, galite išplėsti temų apibrėžimus, kad pridėtumėte pasirinktinių spalvų ir rekvizitų tiek numatytiesiems, tiek pasirinktiniams RNE komponentams.
Norėdami išplėsti spalvas temos objekto viduje, sukursite atskirą TypeScript.ts failą ir deklaruoti modulį @rneui/themed failo viduje.
Tada galite pridėti pasirinktines spalvas ir nurodyti numatomą jų tipą:
// **TypeScript.ts**importuoti '@rneui/themed';
deklaruoti modulis '@rneui/themed' {
eksportuoti sąsajaSpalvos{
pirminė šviesa: eilutė;
antrinė Šviesa: styga;
}
}
Naudodami šį modulį, kurdami temą galite perduoti pasirinktines spalvas kaip reikšmes:
konst tema = sukurtiTema({
spalvos: {
pirminė šviesa: "",
antrinė šviesa: ""
},
})
Dabar tinkintos spalvos yra jūsų temos objekto dalis ir jas galima pasiekti naudojant ThemeProvider, ThemeConsumer, arba useTheme() kabliukas.
RNE komponentai vs. Reaguoti į vietinius komponentus
Komponentų bibliotekos, pvz., „React Native Elements“, yra puikus būdas greitai sukurti ir veikti. Jie sutelkia dėmesį į programos struktūrą, o ne į dizaino detales. Naudodami RNE komponentus, o ne „React Native“ komponentus, pirmiausia turėtumėte vadovautis savo programos akcentu ir kūrimo laiku.
