A komponenskönyvtárak testreszabható és újrafelhasználható kódok gyűjteménye, amelyek egy adott alkalmazás tervezési mintájának megfelelően alakíthatók ki. Segítenek fenntartani a konzisztens tervezést a platformokon, és felgyorsítják a fejlesztési folyamatot.
Itt megtudhatja, hogyan használhatja a React Native Elements komponenskönyvtárat a következő React Native alkalmazás elkészítésekor.
Mi az a React Native Elements?
A React Native Elements (RNE) a React Native fejlesztőinek nyílt forráskódú erőfeszítése egy olyan komponenskönyvtár létrehozására, amely hasznos lehet Android-, iOS- és webalkalmazások készítésekor. Sokakkal ellentétben egyéb React Native komponens könyvtárak, az RNE támogatja a TypeScript szintaxist.
A könyvtár több mint 30 komponensből áll, amelyek a komponens szerkezetére összpontosítanak.
Reaktív natív elemek telepítése a React Native parancssori felülettel
A következő utasítások a React Native Elements telepítéséhez szükségesek a React Native klip használatával létrehozott projektbe.
Telepítse a React Native Elements programot a puszta React Native alkalmazásban a következő futtatással:
npm telepítés @rneui/themed @rneui/base
Ezenkívül telepítenie kell a react-native-vector-ikonokat és a biztonságos terület-kontextust:
npm telepítés reagál-anyanyelvi-vektor-ikonok reagálnak-anyanyelvi-biztonságos-terület-kontextus
A React natív elemek telepítése egy Expo projektben
A React Native Elements telepítése egy meglévőbe Expo projektet, telepítse a csomagot, és reagáljon a native-safe-area-contextre:
fonal hozzá @rneui/themed @rneui/bázis reakció-anyanyelvi-biztonságos terület-kontextus
A függőségi ütközések elkerülése érdekében a csomagok telepítése közben tartson fenn egyetlen csomagkezelőt, például npm-et vagy yarn-t.
Az expo cli használatával épített projektekben alapértelmezés szerint telepítve vannak a react-native-vector-ikonok, így nem kell telepítenie.
Style Single React Native Elements Components
Az RNE-n keresztül elérhető összes komponens különféle kellékeket tartalmaz az alkatrész és az alkatrész tartályának stílusához.
A komponens tárolója egy alap címke egy komponenscímke köré tekercselve, például a. A címke legyőzhetetlen az összetevő körül, és a containerStyle kellék a nézetstílusok alkalmazásához.
Egy komponens fogadhat olyan alapértelmezett stílus kellékeket, mint pl szín, típus, és méret. Egy komponens egyedi, egyedi stílustámaszt is kaphat az összetevő stílusainak kezelésére.
Ezek mind külső stílusok az összetevőhöz.
Például a stílus a Gomb összetevő:
import { Kilátás } tól től "react-native";
import { Button } tól től "@rneui/téma";
const MyComponent = () => {
Visszatérés (
<Kilátás>
<Gomb
buttonStyle={{ háttérszín: "szürke" }}
containerStyle={{szélesség: 150 }}
>
Szilárd gomb
</Button>
<Gomb
típus="vázlat"
containerStyle={{szélesség: 150, margó: 10 }}
cím="Vázlat gomb"
/>
</View>
);
}
A fenti kód bemutatja, hogyan alkalmazhat stílusokat egy Button összetevőre. A One Button alapértelmezett értéket használ típus prop, a másik pedig a szokást használja gombStyle támaszt. Mindkét gomb a containerStyle nézet stílusok hozzáadásához.
Témák létrehozása a React Native Elements komponensekhez
Témák létrehozása az RNE-összetevők számára hasznos, ha stílust szeretne alkalmazni ezen összetevők minden példányára. A témák segítségével egyszerű feladattá válik az alkatrészek testreszabása a kívánt tervezési mintának megfelelően.
Az RNE biztosít a Create theme() funkciót a komponensek stílusához. Ez a funkció olyan témastílusokat tárol, amelyek felülírják az összes összetevő belső vagy alapértelmezett stílusát.
Téma létrehozásához hívja Create theme() és adja át a kívánt témastílusokat függvényargumentumként:
import { ThemeProvider, createTheme } tól től '@rneui/themed';
const theme = CreateTheme({
összetevők: {
Gomb: {
containerStyle: {
margó: 10,
},
titleStyle: {
szín: "fekete",
},
},
},
});
A ThemeProvider stílusokat alkalmaz minden benne lévő összetevőre.
A szolgáltató elfogadja a téma kellék, amely a fent létrehozott témához van beállítva:
<ThemeProvider theme={theme}>
<Gomb címe="Tematikus gomb" />
</ThemeProvider>
<Gomb címe="Normál gomb" />
A témastílusok felülírják a belső vagy alapértelmezett összetevőstílusokat, de nem írják felül a külső összetevőstílusokat.
Az RNE elsőbbségi sorrendje a külső stílusokat a hierarchia tetejére helyezi.
Példa:
// Téma
const theme = CreateTheme({
összetevők: {
Gomb: {
containerStyle: {
margó: 10,
háttérszín: "piros",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Gomb címe="Tematikus gomb" szín={"másodlagos"}/>
</ThemeProvider>
A fenti kódban a háttérszín a Gomb komponens másodlagos lesz, ami egy zöld szín, szemben a piros témastílussal.
A téma Az objektum az RNE-vel együtt kerül szállításra, számos alapértelmezett színértéket biztosítva. Az RNE különféle lehetőségeket kínál, mint például a ThemeConsumer összetevő, useTheme() horog, és makeStyles() horoggenerátor a hozzáféréshez téma tárgy.
A ThemeConsumer komponens becsomagolja a névtelen függvénnyel előállított összetevőket. Ez az anonim funkció téma kellékként.
A téma értékeit a gombbal érheti el stílus támaszt:
import Reagál tól től 'reagál';
import { Button } tól től „react-native”;
import { ThemeConsumer } tól től '@rneui/themed';
const MyComponent = () => (
<ThemeConsumer>
{({ téma }) => (
<Gomb címe="ThemeConsumer" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternatív megoldásként használhatja a useTheme() horog az összetevőn belüli téma eléréséhez.
Például:
import Reagál tól től 'reagál';
import { Button } tól től „react-native”;
import { useTheme } tól től '@rneui/themed';const MyComponent = () => {
const { téma } = useTheme();
Visszatérés (
<View style={styles.container}>
<Gomb címe="useTheme" style={{ color: theme.colors.primary }}/>
</View>
);
};
A makeStyles() hook generátor hasonló a stíluslap használatához a stílusok meghatározásához. A stíluslaphoz hasonlóan ez is elválaszt minden stílust a megjelenített összetevőn kívülről. Hivatkozva a téma objektum egy összetevő stílusban kellék.
Témák kiterjesztése TypeScript segítségével
Az RNE támogatja a TypeScript-deklarációkat az alkalmazásban, lehetővé téve a fejlesztők számára, hogy kihasználják az előnyeit a TypeScript nyelv használatának előnyei.
TypeScriptekkel nyilatkozat összevonása, kibővítheti a témadefiníciókat egyéni színek és kellékek hozzáadásával az RNE alapértelmezett és egyéni összetevőihez.
A téma objektumon belüli színek kiterjesztéséhez hozzon létre egy külön TypeScript.ts fájlt, és deklarálja a modult @rneui/téma a fájl belsejében.
Ezután hozzáadhatja egyéni színeit, és megadhatja a várható típusukat:
// **TypeScript.ts**import '@rneui/themed';
kijelent modult '@rneui/themed' {
export felületSzínek{
elsődleges fény: string;
másodlagos fény: húr;
}
}
Ezzel a modullal a téma létrehozásakor értékként adhatja át egyéni színeit:
const theme = CreateTheme({
színek: {
elsődleges fény: "",
másodlagos fény: ""
},
})
Mostantól az egyéni színek a téma objektum részét képezik, és a használatával érhetők el ThemeProvider, ThemeConsumer, vagy a useTheme() horog.
RNE komponensek vs. React Native Components
Az olyan komponenskönyvtárak, mint a React Native Elements, nagyszerű lehetőséget nyújtanak az alkalmazások gyors üzembe helyezésére. Továbbra is az alkalmazás szerkezetére összpontosítanak, nem pedig a tervezés részleteire. Az RNE komponensek React Native komponensekkel szembeni használatát elsősorban az alkalmazás fókusza és a fejlesztési idő áll rendelkezésére.