Stilimi kontekstual i tipografisë në React Native

Edhe pse kam përdorur React Native për një kohë të gjatë, kurrë nuk kam qenë vërtet i kënaqur me qasjet që kam parë kur bëhej fjalë për tematikën e komponentëve të tekstit. Doja një zgjidhje që ndihej më shumë si CSS. Ndërsa React Native përpiqet të imitojë stilimin si Ueb përmes një biblioteke të quajtur Yoga, ai nuk ofron funksionalitet kaskadë.

I gjithë stilimi në React Native është efektivisht i linjës dhe për këtë arsye ndan probleme të ngjashme që ekosistemi i Uebit ka shpërthyer që nga "lëvizja CSS në JS":

• Pyetjet në media
• Stilet globale (fontet, stilet e paracaktuara)
• Pseudo stile

Problemi

Unë dua aftësinë për të aplikuar një stil bazë për të gjithë komponentët e tekstit brenda aplikacionit. Kjo përfshin stile të tilla si:

• Familja e shkronjave
• Përmasa e germave
• Stili i shkronjave
• Ngjyrë

Unë gjithashtu do të doja të anashkaloja stilet, p.sh. pjesë të aplikacionit që mund të dëshirojnë një madhësi të ndryshme fonti ose të jenë të pjerrëta.

Zgjidhja e parë: Moduli i stilit

Një qasje e thjeshtë do të ishte deklarimi i stilit bazë si modul dhe importimi i tij kur përdorni komponentët e tekstit:

Edhe pse e thjeshtë, ka disa probleme me këtë qasje:

• Pamjet bëhen të mbushura me rekuizita stili.
• Lehtësisht e prirur ndaj rasteve kur mungojnë rekuizitat e stilit.

Zgjidhja e dytë: Komponenti i personalizuar

Siç është detajuar në "dokumentacionin zyrtar", një tjetër qasje është përmbledhja e stilit bazë në një komponent teksti të personalizuar me aftësinë për të anashkaluar stile specifike:

Dokumentacioni shpjegon gjithashtu se komponentët e tekstit kanë një koncept të trashëgimisë së stilit. Sidoqoftë, futja e MyAppText rezulton në rastet kur disa stile injorohen për shkak të mbishkrimit të stilit bazë:

// Nesting with MyAppText overwrites fontStyle with textStyle.fontStyle.
<MyAppText style={{fontStyle: "italic"}}>
  <MyAppText>Hello World</MyAppText>
</MyAppText>
// Nesting with Text allows style inheritance to work as expected.
<MyAppText style={{fontStyle: "italic"}}>
  <Text>Hello World</Text>
</MyAppText>

Në përgjithësi, ka disa probleme me këtë qasje:

• Çështja e përbërjes e përshkruar më sipër e bën konfuze që pjesët e aplikacionit të përdorin të dy komponentët Text dhe MyAppText për të pasur efektin e dëshiruar.
• Trashëgimia e stilit funksionon vetëm me pemë përbërëse vetëm me tekst.

Zgjidhja e tretë: API e kontekstit

Shënim: Për ta mbajtur këtë artikull mjaft të shkurtër, unë do të rekomandoja të lexoni dokumentacionin e React nëse nuk jeni tashmë të njohur me "API-në e re të kontekstit".

Parametri defaultValue i përdorur për të krijuar komponentët Kontext Konsumatori dhe Ofruesi është vlera e marrë nga komponentët e Konsumatorit nëse nuk gjendet asnjë Ofrues paraardhës në pemën e komponentit. Vendosja e këtij parametri në stilin bazë do të japë një efekt të ngjashëm me zgjidhjet e mëparshme.

Për të marrë efektin kaskadues, komponenti Provider do të përdoret për të ndryshuar vlerën që marrin komponentët pasardhës të konsumatorit. Vlera e tij do të jetë rezultat i bashkimit të vlerës së konsumatorit me stilin mbështetës.

Fatkeqësisht, ka disa probleme me këtë qasje:

• Ashtu si zgjidhja e mëparshme, stilimi kontekstual është i kufizuar në pemët përbërëse vetëm me tekst.
• Disa stile nuk duhet të kalojnë në kaskadë, të tilla si mbushja dhe diferenca, dhe në vend të kësaj të zbatohen drejtpërdrejt në komponentin Tekst.

Adresimi i problemit të dytë do të thotë se MyAppText imiton funksionalitetin që Text ofron jashtë kutisë. Megjithatë, tani nuk ka më nevojë të përdoret Teksti kur futet si në zgjidhjen e mëparshme:

// Renders in italics as expected.
<MyAppText style={{fontStyle: "italic"}}>
  <MyAppText>Hello World</MyAppText>
</MyAppText>

Zgjidhja e katërt: Context API (Rev. 2)

Kjo qasje ndërtohet në krye të zgjidhjes së mëparshme, por në vend të kësaj nxjerr dy shqetësimet kryesore të MyAppText në komponentë të veçantë:

• StyleText — Ndryshon vlerën e stilit kontekstual.
• MyAppText — Konsumon vlerën e stilit kontekstual dhe mbështetjen e stilit.

MyAppText është thjeshtuar në mënyrë drastike dhe nuk kërkon më logjikë për të përcaktuar se cilat stile duhet/nuk duhet të kalojnë. Kjo është për shkak se stilet kaskadë duhet t'i kalohen StyleText, ndërsa stilet specifike të komponentëve duhet t'i kalojnë drejtpërdrejt MyAppText.

Për më tepër, meqenëse StyleText nuk jep asgjë, nuk kufizohet më as në pemët përbërëse vetëm me tekst. Stilizimi mund të ndryshohet për nënpemë të tëra dhe komponentët pasardhës të MyAppText do të marrin stilin e ndryshuar kontekstual.

Ashtu si me shumicën e gjërave në zhvillimin e softuerit, duhet të merren parasysh kompromiset:

• MyAppText është më pak determinist pasi stili i tij varet kryesisht nga vendi ku ndodhet në pemën përbërëse. Megjithatë, përdorimi i StyleText si një mënyrë e qartë për të ndryshuar vlerën e stilit kontekstual ndihmon në reduktimin e kësaj çështjeje.
• Në pamjet komplekse, mund të jetë e vështirë të korrigjoni se çfarë stili zbatohen në fund të fundit të komponentëve të veçantë të MyAppText. Një mënyrë për ta zgjidhur këtë është të ndryshoni StyleText për të marrë një "funksion si fëmijë" për të lejuar regjistrimin e konsolës. Një mënyrë tjetër është të shtoni një mbështetëse 'logStyle' në MyAppText që kur konsola e pranishme regjistron stilin e tekstit të etiketuar me vargun e kaluar përmes 'logStyle'.
• Komponentët që përdorin Kontekstin bëhen më të ndërlikuar për t'u testuar. Ndryshe nga dy zgjidhjet e para ku mjaftonte renderimi i cekët, këtu më duhej të montoja komponentin për të inspektuar mbështetësin e stilit të tekstit. Ka mënyra për ta shmangur këtë duke "tallur komponentët e kontekstit", por unë personalisht përpiqem të shmang talljen nëse është e mundur pasi kjo çon në një lidhje më të ngushtë me zbatimin.
• Unë jam ende spekulues për çështjet e mundshme të performancës, megjithëse ende nuk e kam parë këtë në projektet reale mbi të cilat jam duke punuar dhe që përdorin këtë model.

Faleminderit per leximin! :)