Biblioteki komponentów to zbiór dostosowywalnego i wielokrotnego użytku kodu, który można dopasować do określonego wzorca projektowego aplikacji. Pomagają zachować spójny projekt na różnych platformach i przyspieszają proces programowania.
Tutaj dowiesz się, jak korzystać z biblioteki komponentów React Native Elements podczas tworzenia kolejnej aplikacji React Native.
Co to jest React Native Elements?
React Native Elements (RNE) to inicjatywa open source programistów React Native mająca na celu stworzenie biblioteki komponentów, która może być przydatna podczas tworzenia aplikacji na Androida, iOS i aplikacje internetowe. W przeciwieństwie do wielu inne biblioteki komponentów React Native, RNE obsługuje składnię TypeScript.
Biblioteka składa się z ponad 30 komponentów, które koncentrują się na strukturze komponentów.
Instalowanie reaktywnych elementów natywnych za pomocą React Native CLI
Poniższe instrukcje dotyczą instalacji React Native Elements w projekcie utworzonym przy użyciu React Native cli.
Zainstaluj elementy React Native w swojej aplikacji React Native, uruchamiając:
instalacja npm @rneui/themed @rneui/base
Powinieneś także zainstalować ikony natywnych wektorów reakcji i kontekst bezpiecznego obszaru:
np zainstalować reagować-rodzinny-wektorowe-ikony reagują-rodzinny-bezpieczna-obszar-kontekst
Jak zainstalować elementy React Native w projekcie Expo
Aby zainstalować React Native Elements w istniejącym pliku Expo project, zainstaluj pakiet i zareaguj-native-safe-area-context:
dodatek przędzy @rneui/themed @rneui/zasada reaguje-rodzinny-bezpieczny-obszar-kontekst
Utrzymuj jednego menedżera pakietów, takiego jak npm lub przędza, podczas instalowania pakietów, aby uniknąć ryzyka kolizji zależności.
Projekty zbudowane przy użyciu expo cli mają domyślnie zainstalowane ikony wektorów natywnych, więc nie musisz ich instalować.
Stylizacja komponentów Single React Native Elements
Wszystkie komponenty dostępne za pośrednictwem RNE przyjmują różne rekwizyty do stylizacji komponentu i kontenera komponentu.
Kontener komponentu to podstawa zawijanie znacznika wokół znacznika komponentu, np. The tag jest niezwyciężony wokół komponentu i zajmuje styl kontenera prop, aby zastosować style widoku.
Komponent może otrzymać domyślne rekwizyty do stylizacji, takie jak kolor, typ, I rozmiar. Komponent może również otrzymać unikalny, niestandardowy styl, który będzie obsługiwał style komponentu.
Są to wszystkie zewnętrzne style komponentu.
Na przykład stylizacja Przycisk część:
import { Pogląd } z „reaguj natywnie”;
import { Przycisk } z "@rneui/temat";
konst Mój składnik = () => {
powrót (
<Pogląd>
<Przycisk
buttonStyle={{Kolor tła: "szary" }}
kontenerStyle={{szerokość: 150 }}
>
Solidny przycisk
</Button>
<Przycisk
typ="zarys"
kontenerStyle={{szerokość: 150, margines: 10}}
tytuł="Przycisk konspektu"
/>
</View>
);
}
Powyższy kod pokazuje, jak można zastosować style do komponentu Button. Jeden przycisk używa wartości domyślnej typ prop, a drugi używa custom przyciskStyl rekwizyt. Oba przyciski również używają styl kontenera prop, aby dodać style widoku.
Tworzenie motywów dla komponentów React Native Elements
Tworzenie motywów dla komponentów RNE jest przydatne, gdy chcesz zastosować styl do każdego wystąpienia tych komponentów. Dzięki motywom dostosowywanie komponentów do pożądanego wzorca projektowego staje się łatwym zadaniem.
RNE zapewnia utwórz motyw() funkcja do stylizowania komponentów. Ta funkcja będzie przechowywać style motywu, które zastępują wewnętrzne lub domyślne style każdego komponentu.
Aby utworzyć motyw, zadzwoń utwórz motyw() i przekaż żądane style motywu jako argument funkcji:
import { Dostawca motywu, utwórz motyw } z '@rneui/temat';
konst motyw = utwórz motyw ({
składniki: {
Przycisk: {
styl kontenera: {
margines: 10,
},
tytułStyl: {
kolor: "czarny",
},
},
},
});
The Dostawca motywu zastosuje style do dowolnego komponentu w nim zawiniętego.
Dostawca akceptuje a temat prop, który jest ustawiony na motyw utworzony powyżej:
<ThemeProvider motyw = {motyw}>
<Tytuł przycisku="Tematyczny guzik" />
</ThemeProvider>
<Tytuł przycisku="Normalny przycisk" />
Style motywu zastępują wewnętrzne lub domyślne style komponentów, ale nie zastępują zewnętrznych stylów komponentów.
Kolejność pierwszeństwa RNE umieszcza style zewnętrzne na szczycie hierarchii.
Przykład:
// Temat
konst motyw = utwórz motyw ({
składniki: {
Przycisk: {
styl kontenera: {
margines: 10,
kolor tła: "czerwony",
},
},
},
});
//Component
<ThemeProvider motyw = {motyw}>
<Tytuł przycisku="Tematyczny guzik" kolor={"wtórny"}/>
</ThemeProvider>
W powyższym kodzie kolor tła pliku Przycisk składnik będzie drugorzędny, czyli kolor zielony, w przeciwieństwie do stylu motywu czerwieni.
A temat obiekt jest dostarczany z RNE, dostarczając wiele domyślnych wartości kolorów po wyjęciu z pudełka. RNE zapewnia różne opcje, takie jak TematKonsument część, użyj motywu () hak i makeStyles() generator haków, aby uzyskać dostęp do temat obiekt.
The TematKonsument component otoczy twoje komponenty renderowane funkcją anonimową. Ta anonimowa funkcja trwa temat jako rekwizyt.
Możesz uzyskać dostęp do wartości motywu za pomocą a styl rekwizyt:
import Reagować z 'reagować';
import { Przycisk } z „reaguj natywnie”;
import { Konsument tematu } z '@rneui/temat';
konst Mój składnik = () => (
<TematKonsument>
{({ motyw }) => (
<Tytuł przycisku="TematKonsument" style={{ kolor: motyw.kolory.podstawowy}} />
)}
</ThemeConsumer>
)
Alternatywnie możesz użyć tzw użyj motywu () hook, aby uzyskać dostęp do motywu wewnątrz komponentu.
Na przykład:
import Reagować z 'reagować';
import { Przycisk } z „reaguj natywnie”;
import { useTheme } z '@rneui/temat';konst Mój składnik = () => {
konst { motyw } = użyj motywu ();
powrót (
<Wyświetl style={styles.container}>
<Tytuł przycisku="Użyj motywu" style={{ kolor: motyw.kolory.podstawowy}}/>
</View>
);
};
The makeStyles() Generator haków jest podobny do używania arkusza stylów do definiowania stylów. Podobnie jak arkusz stylów, oddziela stylizację od zewnątrz renderowanego komponentu. Odwołując się do temat obiekt wewnątrz rekwizytu stylu komponentów.
Rozszerzanie motywów za pomocą TypeScript
RNE obsługuje deklaracje TypeScript w Twojej aplikacji, dzięki czemu programiści mogą z nich korzystać korzyści płynące z używania języka TypeScript.
Z TypeScriptami połączenie deklaracji, możesz rozszerzyć definicje motywów, aby dodać niestandardowe kolory i rekwizyty zarówno dla domyślnych, jak i niestandardowych komponentów RNE.
Aby rozszerzyć kolory wewnątrz obiektu motywu, utworzysz osobny TypeScript.ts plik i zadeklaruj moduł @rneui/tematyczny wewnątrz pliku.
Następnie możesz dodać własne kolory i określić ich oczekiwany typ:
// **TypeScript.ts**import '@rneui/themed';
ogłosić moduł '@rneui/tematyczny' {
eksport interfejsZabarwienie{
światło podstawowe: ciąg;
dodatkowe światło: ciąg;
}
}
Za pomocą tego modułu możesz przekazywać niestandardowe kolory jako wartości podczas tworzenia motywu:
konst motyw = utwórz motyw ({
kolory: {
światło główne: "",
Światło dodatkowe: ""
},
})
Teraz niestandardowe kolory są częścią obiektu motywu i można uzyskać do nich dostęp za pomocą Dostawca motywu, Konsument motywu, albo użyj motywu () hak.
Komponenty RNE vs. Reaguj na komponenty natywne
Biblioteki komponentów, takie jak React Native Elements, to świetny sposób na szybkie uruchomienie aplikacji. Skupiają się na strukturze aplikacji, a nie na szczegółach projektu. Używając komponentów RNE zamiast komponentów React Native, należy kierować się przede wszystkim celem aplikacji i tym, ile masz czasu na jej rozwój.