StyleSheet.create och inline-stilar

Inline-stilar skrivs direkt i JSX som en JavaScript-objektliteral: style={{ color: 'red' }}. De skapas om vid varje rendering, vilket är något mindre effektivt än stilar från StyleSheet.create. Inline-stilar passar däremot när stilvärdet är dynamiskt – alltså beräknas från props eller tillstånd vid körning. Du kan till exempel ange backgroundColor utifrån användarens valda temafärg eller beräkna width från komponentens aktuella tillstånd. I dessa fall kan StyleSheet.create inte hjälpa, eftersom värdet ändras vid körning.

React Natives style-prop accepterar en array med stilobjekt. Senare stilar i arrayen skriver över tidigare stilar för samma egenskap (ungefär som specificitet i CSS, men enklare). På så sätt kan du kombinera en grundstil från StyleSheet.create med dynamiska inline-överskrivningar: style={[styles.box, { backgroundColor: color }]}. De statiska stilarna är effektiva eftersom endast ID:n skickas, medan det dynamiska inline-objektet läggs ovanpå. Falsy-värden i arrayen (null, undefined, false) ignoreras säkert.

I den här lektionen lärde Ni Er: StyleSheet.create är effektivare än infogade objekt eftersom stilar skickas som ID:n och inte som fullständiga objekt, stilarrayer slår samman flera stilobjekt där senare poster har företräde, och useColorScheme möjliggör stilar som anpassas efter mörkt läge. Härnäst utforskar vi Flexbox-riktning, justifyContent och alignItems för full kontroll över layouten.

React Native stöder procentsträngar för width, height och positioneringsegenskaper som top och left. En bredd på '100%' fyller hela den överordnade komponenten, '50%' tar upp hälften, och så vidare. Procentvärden beräknas i förhållande till den överordnade containerns storlek, inte skärmen. Detta är användbart för kort som ska ta upp hela bredden (width: '100%') och layouter med två kolumner (width: '48%'). För själva skärmbredden använder Ni Dimensions-API:t eller hooken useWindowDimensions för responsiva, dynamiska värden.

StyleSheet.flatten() tar emot en stilarray och returnerar ett enda sammanslaget objekt. Detta är användbart när Ni programmatiskt behöver läsa det slutliga beräknade stilvärdet — till exempel läsa backgroundColor från en stilarray för att skicka det till en animering. Stilarrayer löses på samma sätt som i React Native: senare värden skriver över tidigare. Att logga StyleSheet.flatten(styles) är också praktiskt vid felsökning, eftersom Ni då ser exakt vilka stilar en komponent får efter att all sammanslagning har gjorts.

StyleSheet.hairlineWidth returnerar den tunnaste möjliga linjebredden på den aktuella enheten — vanligtvis 0.5 på Retina-skärmar och 1 på skärmar med lägre pixeltäthet. Använd den för tunna avdelare och kantlinjer som ska se skarpa ut oavsett pixeltäthet. Den är bättre än att hårdkoda borderWidth: 0.5, eftersom hairlineWidth automatiskt anpassar sig efter skärmens pixelförhållande. Det är en liten men märkbar detalj som ger en mer genomarbetad känsla på skärmar med hög pixeltäthet, som i moderna iPhone- och Pixel-enheter.

En vanlig konvention är att definiera stilar längst ned i samma fil som komponenten som använder dem. Då hålls relaterad kod samlad, och det blir enkelt att förstå en komponents fullständiga visuella specifikation utan att öppna en annan fil. För mycket stora komponenter med många stilavsnitt kan Ni dela upp stilarna i en separat fil med namnet ComponentName.styles.ts. Undvik att skapa en enda global fil med namnet styles.js för hela appen — den blir svår att hantera och gör det svårt att veta var de olika stilarna används.

För att stödja mörkt läge använder Ni hooken useColorScheme för att identifiera det aktuella schemat ('light' eller 'dark') och väljer sedan olika färgvärden för varje läge. Kombinera detta med Er stilarray: basstilarna innehåller layout och form, medan ett dynamiskt färgobjekt tillämpar temats färger. En mer skalbar metod är en ThemeContext som tillhandahåller färgtokens i hela appen, men useColorScheme är det snabbaste sättet att få mörkt läge att fungera utan ytterligare bibliotek.

Om Ni föredrar en CSS-in-JS-syntax fungerar styled-components med React Native. Installera det med npm install styled-components och använd fabrikerna styled.View och styled.Text. Styled-components genererar optimerade StyleSheet-poster i bakgrunden, samtidigt som Ni kan skriva CSS-liknande syntax med mallsträngar (använd enkla citattecken inuti, inte backticks med interpolering för statiska stilar). Det stöder även dynamisk stilformatering baserad på props med fullständigt TypeScript-stöd. Många team föredrar det eftersom det ger en välbekant CSS-upplevelse.

I den här lektionen har du lärt dig att StyleSheet.create är effektivare än infogade objekt eftersom stilar skickas som ID:n i stället för som fullständiga objekt, att stilarrayer slår samman flera stilobjekt där senare poster har företräde, och att useColorScheme möjliggör styling som tar hänsyn till mörkt läge. Nästa steg är att utforska Flexbox-riktning, justifyContent och alignItems för full kontroll över layouten.