Bibliotecile de componente sunt o colecție de cod personalizabil și reutilizabil care poate fi realizat pentru a se potrivi modelului de design al unei aplicații specifice. Acestea ajută la menținerea unui design consistent pe platforme și la accelerarea procesului de dezvoltare.
Aici veți învăța cum să utilizați biblioteca de componente React Native Elements atunci când vă construiți următoarea aplicație React Native.
Ce este React Native Elements?
React Native Elements (RNE) este un efort open-source al dezvoltatorilor React Native pentru a crea o bibliotecă de componente care poate fi utilă la construirea de aplicații Android, iOS și web. Spre deosebire de mulți alte biblioteci de componente React Native, RNE acceptă sintaxa TypeScript.
Biblioteca constă din peste 30 de componente care se concentrează pe structura componentelor.
Instalarea Reactive Native Elements cu React Native CLI
Următoarele instrucțiuni sunt pentru a instala React Native Elements într-un proiect creat folosind cli-ul React Native.
Instalați React Native Elements în aplicația React Native, rulând:
instalare npm @rneui/themed @rneui/base
De asemenea, ar trebui să instalați pictogramele-vector-native-reacție și contextul-zonă-sigură:
npm instalare reacţiona-nativ-pictogramele-vectorale reacţionează-nativ-sigur-zonă-context
Cum se instalează React Native Elements într-un proiect Expo
Pentru a instala React Native Elements într-un fișier existent Expo proiect, instalați pachetul și react-native-safe-area-context:
adaugă fire @rneui/themed @rneui/base react-nativ-context-zonă-sigură
Mențineți un singur manager de pachete, cum ar fi npm sau yarn, în timp ce instalați pachete, pentru a evita riscul de ciocniri de dependențe.
Proiectele construite folosind expo cli au instalate implicit pictograme react-native-vector, deci nu trebuie să-l instalați.
Stilizarea componentelor Single React Native Elements
Toate componentele disponibile prin RNE au diferite elemente de recuzită pentru stilarea componentei și a containerului componentei.
Containerul componentei este un element de bază eticheta care se înfășoară în jurul unei etichete componente, cum ar fi. The eticheta este invincibilă în jurul componentei și ia a containerStyle prop pentru a aplica stiluri de vizualizare.
O componentă poate primi elemente de recuzită implicite, cum ar fi culoare, tip, și mărimea. O componentă poate primi, de asemenea, un stil personalizat unic pentru a gestiona stilurile componentei.
Acestea sunt toate stilurile externe pentru componentă.
De exemplu, stilizarea Buton componenta:
import { Vizualizare } din „react-nativ”;
import { Buton } din „@rneui/themed”;
const MyComponent = () => {
întoarcere (
<Vedere>
<Buton
buttonStyle={{ backgroundColor: "gri" }}
containerStyle={{ lățime: 150 }}
>
Buton solid
</Button>
<Buton
tip="contur"
containerStyle={{ lățime: 150, margine: 10 }}
titlu="Butonul Contur"
/>
</View>
);
}
Codul de mai sus arată cum puteți aplica stiluri unei componente Button. One Button folosește o valoare implicită tip prop, iar celălalt folosește obiceiul ButonStil recuzită. Ambele butoane folosesc și containerStyle prop pentru a adăuga stiluri de vizualizare.
Crearea temelor pentru componentele React Native Elements
Crearea de teme pentru componentele RNE este utilă atunci când doriți să aplicați un stil la fiecare instanță a acelor componente. Cu teme, personalizarea componentelor pentru a se potrivi cu modelul de design dorit devine o sarcină ușoară.
RNE oferă a createTheme() funcţionează pentru a stila componentele. Această funcție va păstra stiluri de teme care suprascriu stilurile interne sau implicite ale fiecărei componente.
Pentru a crea o temă, sunați createTheme() și transmiteți stilurile de teme dorite ca argument de funcție:
import { ThemeProvider, createTheme } din '@rneui/themed';
const theme = createTheme({
componente: {
Buton: {
containerStyle: {
marja: 10,
},
titleStyle: {
culoare: "negru",
},
},
},
});
The ThemeProvider va aplica stiluri oricărei componente înfășurate în ea.
Furnizorul acceptă a temă prop care este setat pe tema creată mai sus:
<ThemeProvider theme={theme}>
<Titlul butonului="Buton tematic" />
</ThemeProvider>
<Titlul butonului="Buton normal" />
Stilurile temei înlocuiesc stilurile componente interne sau implicite, dar nu vor înlocui stilurile componente externe.
Ordinea de prioritate a RNE plasează stilurile externe în vârful ierarhiei.
Exemplu:
// Tema
const theme = createTheme({
componente: {
Buton: {
containerStyle: {
marja: 10,
culoare de fundal: "roșu",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Titlul butonului="Buton tematic" culoare={"secundar"}/>
</ThemeProvider>
În codul de mai sus, culoarea de fundal a Buton componenta va fi secundară, care este o culoare verde spre deosebire de stilul tematic de roșu.
A temă obiectul este livrat cu RNE, oferind numeroase valori implicite de culoare din cutie. RNE oferă diverse opțiuni, cum ar fi ThemeConsumer componenta, useTheme() cârlig, și makeStyles() generator de cârlig pentru a accesa temă obiect.
The ThemeConsumer componenta va împacheta componentele dvs. redate cu o funcție anonimă. Această funcție anonimă ia temă ca recuzită.
Puteți accesa valorile temei cu a stil recuzită:
import Reacţiona din 'reacţiona';
import { Buton } din 'react-nativ';
import { ThemeConsumer } din '@rneui/themed';
const Componenta mea = () => (
<ThemeConsumer>
{({ tema }) => (
<Titlul butonului="ThemeConsumer" stil={{ culoare: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternativ, puteți utiliza useTheme() cârlig pentru a accesa tema din interiorul unei componente.
De exemplu:
import Reacţiona din 'reacţiona';
import { Buton } din 'react-nativ';
import { useTheme } din '@rneui/themed';const MyComponent = () => {
const { theme } = useTheme();
întoarcere (
<Vizualizați style={styles.container}>
<Titlul butonului="foloseșteTemă" stil={{ culoare: theme.colors.primary }}/>
</View>
);
};
The makeStyles() generatorul de cârlig este similar cu utilizarea unei foi de stil pentru a defini stilurile. La fel ca foaia de stil, separă orice stil din exteriorul componentei dvs. randate. Făcând referire la temă obiect în interiorul unei componente de stil prop.
Extinderea temelor cu TypeScript
RNE acceptă declarațiile TypeScript în aplicația dvs., permițând dezvoltatorilor să profite de acestea beneficiile utilizării limbajului TypeScript.
Cu TypeScripts fuziunea declarației, puteți extinde definițiile temei pentru a adăuga culori și elemente de recuzită personalizate atât pentru componentele implicite, cât și pentru cele personalizate ale RNE.
Pentru a extinde culorile din interiorul obiectului temă, veți crea un separat TypeScript.ts fișier și declara modulul @rneui/themed în interiorul dosarului.
Apoi puteți continua să adăugați culorile personalizate și să specificați tipul lor așteptat:
// **TypeScript.ts**import '@rneui/themed';
declara modul '@rneui/tematic' {
export interfataCulori{
primaryLight: șir;
secondaryLight: șir;
}
}
Cu acest modul, puteți trece culorile personalizate ca valori atunci când creați o temă:
const theme = createTheme({
culori: {
primaryLight: "",
lumina secundară: ""
},
})
Acum, culorile personalizate fac parte din obiectul dvs. tema și pot fi accesate folosind ThemeProvider, ThemeConsumer, sau useTheme() cârlig.
Componentele RNE vs. React Native Components
Bibliotecile de componente precum React Native Elements sunt o modalitate excelentă de a pune în funcțiune o aplicație rapid. Îți păstrează atenția pe structura aplicației, mai degrabă decât pe detaliile designului. Utilizarea componentelor RNE peste componentele React Native ar trebui să fie ghidată în primul rând de focalizarea aplicației dvs. și de cât timp de dezvoltare aveți.
