Kääri reagoivia alkuperäisiä komponenttejasi

Huomaa: Tämä viesti on vanha. En usko, että sanoisin silti, että tekstikomponenttien "kääriminen" on paras tapa. Sen sijaan olen määritellyt puoli tusinaa käyttämääni kirjasintyyliä erillisessä tiedostossa, joka voidaan tuoda ja levittää tyyli- (tai tunne) määritelmiin tarpeen mukaan.

Voisi ajatella, että koska React Native -komponentit ovat luokkia, niitä tulisi laajentaa. Mutta kuten Dan Abramov on todennut, se ei ole niin hieno idea. Voisit ottaa käyttöön korkeamman asteen komponentteja, mutta todella tarvitset vain korvata tiettyjen ydinreaktiokomponenttien käytön jollain hiukan tehokkaammalla. Sieltä kääre tulee.

Käärimällä vain RN-komponentti vähän käyttöliittymätoimintoihin, pidät koodisi puhtaana ja määrität myös globaalit ominaisuudet. Kokeneille RN-kehittäjille katso tyylitaulukot ja selvitä, kuinka monta kertaa käytät Tyylitaulukkoa asetteluhintojen käsittelemiseen. Haluatko päästä eroon siitä? Minä tein. Aloittelijoille toivon, että tämä viesti auttaa sinua oppimaan flexboxia antamalla sinulle työkalun, joka yksinkertaistaa sitä huomattavasti.

Tämä grafiikka näyttää kuinka se toimii pähkinänkuoressa. Tarkastelen sitä myöhemmin. Mutta haluan ensin mainita, miksi on niin tärkeää, että käärit tietyt RN-ydinkomponentit omaan mukautettuun koodiin.

Tämä on vain esimerkki yhdestä kääritystä komponentista, jota minä rakastan käyttämään ja jolla on avoin lähde. Mutta löydät usein, että sinun täytyy kääriä oma. Selitän.

Olen luonut kaksi julkaistua reaaliaikaista sovellusta, ja viimeisen projektin uudelleenarvioinnin jälkeen olen päättänyt, että on kolme kolmea asiaa, jotka sinun tulisi aina kääriä.

  1. Teksti
  2. tuntuiset
  3. näkymä

Selvyyden vuoksi kääre tarkoittaa, että tulet ja käytät omaa tekstikomponenttia src: stä RN: n sijasta. Sinun tulee kääriä se.

Teksti

Sinun on melkein käärittävä teksti kahdesta syystä. Yksi syy on, että et halua tuoda ja ilmoittaa samaa fonttiperhettä jokaisessa sovelluksesi komponentissa. Haluat asettaa fontin oletukseksi kaikille tekstikomponenteille tai pystyä helposti vaihtamaan fonttien välillä jotenkin.

Toinen syy puhuu suurempiin ongelmiin, jotka sinun on ymmärrettävä React Native UI -sovelluksesta. FontSize on pikselimäärä, joka näkyy eri tavalla eri laitteilla, joilla on eri resoluutio. Tämä pätee myös korkeuteen, leveyteen, marginaaliin, pehmusteisiin ja absoluuttiseen sijaintiin. Siksi sinun tulisi aina yrittää käyttää joustavuutta asetteluihin, kun mahdollista, ja jos ei, harkitse getPixelSizeForLayoutSize käyttöä aina kun määrität nämä ominaisuudet. Se on tuskaa, mutta pidä syytä yrittää todella saada kaikki aikaan ensin flexboxilla.

Tekstissä ei kuitenkaan tarvitse asettaa fontSize pikseliksi. Näytän vain käyttämäni lainaamalla tätä SO-viestiä.

Pohjimmiltaan tällainen kääriminen on tosiasiallisesti rekrytointi rekvisiitta tyyleihin. Jotkut saattavat pitää sitä anti-mallina, mutta tulos on loistava työkalu minimaalisesti ajattelevalle kehittäjälle. Sen sijaan, että tuoda tekstiä "reagoi alkuperäisestä", tuota sen sijaan tiedostosta "/components/Text.js" tai mihin tahansa haluat ladata sen.

Paljastuneiden rekvisiittien tulisi kattaa suurin osa tyyleistäsi, joten sinun ei tarvitse joutua laatimaan tyylitaulukkotietoa ollenkaan.

Näin käytän sitä. Se on aika puhdas ja tiedän miltä tämä teksti näyttää ilman, että tarvitsisi viitata tyylitaulukkoon.

tuntuiset

Siellä on runsaasti moduuleja käärittämään tämä, vaikkakaan yhtään niistä, jotka eivät ole liian suosittuja, mutta olennaista on, että Koskettavaa (NativeFeedback jne.) Käsitellään eri tavalla sekä iOS: ssä että Androidissa, joten sinun ei pitäisi tuoda tätä Reaktista. native. Löydät myös paljon Button-toteutuksia, mutta niissä on yleensä tyylejä sisäänrakennettuna

näkymä

Katselua varten ehdottaisin tarkistamaan reagoi-natiivirivikomponenttini.

Päätin jostain, kun otin viimeistellä viimeisen sovellukseni käyttöliittymän. Tajusin, että sen sijaan, että löysin elementtejä, jotka olisivat uudelleenkäytettäviä ja ansainneet oman ilmoituksensa, etsin sen sijaan kohtauksia, joiden elementtejä ei käytetty muissa kohtauksissa.

Ajattelin muita tapoja vähentää sotkua. Muistin, että jouduin asettamaan flexDirection: rivi, kun se oli usein ainoa ominaisuus, joka asetettiin. Aloitin luomalla käärin View-ympärille tehdäkseni juuri tämän. Mutta sitten huomasin niin monta kertaa, että olin käyttänyt vain linjauskohteita ja perustella sisältöä.

Riittää, kun sanoin, että päädyin luomaan kääre, joka teki jotain, jonka puoli toivoin tekevän. Se teki tyylitaulukkailmoituksista tarpeettomia.

Aloitetaan tästä kohtauksesta. Se on profiilinhallintaruutu. Painikkeiden ja ehkä logon lisäksi täällä ei ole uudelleenkäytettäviä komponentteja. Siellä on ScrollView-komponentti, jota en todellakaan aio käyttää muualla sovelluksessa.

Joten tämän sivun päätavoite on siis järjestää elementtejä, joista suuri osa on tekstiä.

Joten tarkastelemalla sivun yläosan koodia, näet pienen sekoituksen rivityylejä ja tyylitaulukon käyttöä. Ei ihanteellinen, mutta yhden edut eivät ole koskaan vakuuttaneet minua sulkemaan yhtä tai toista pois käytännössä.

Muutin tätä vähän tunnustaen huolimaton ja väärän tyylin käytön, mutta näin tapahtui, koska en koskaan laskeutunut ”parempaan” tapaan käsitellä tyylejä. Mutta julistammeko joka tapauksessa todella "tyylejä" täällä? Kaikki tekstityylien ulkopuolella todella koskee asettelua.

Pyrin poistamaan tarpeen kysyä itseltämme, missä käsitellä asettelutyylejä, koska flexboxin kanssa ne eivät ole oikeasti tyylejä. Flexbox ansaitsee sen oman paikan tyylien ulkopuolella, koska se on niin voimakas, mutta usein ymmärretty väärin.

Katso, mitä tapahtuu, kun korvaamme flexbox-asettelutoiminnan jollain intuitiivisemmalla ja tiiviimmällä.

Tarpeeksi yksinkertainen?

Huomautus reagoi omaperäisestä rivistä: Rivi on näkymä, jossa on joustava suunta: 'rivi' ja valitsin asettavat kaikkien alakomponenttien sijainnin numeron 5 sijaintiin puhelinnumerossa - ja flex, jota käytetään tässä boolenna, asettaa joustava omaisuus arvoon 1.

Käyttämällä reagoi-natiiviriviä ja yllä olevaa tekstikomponenttia, olen siirtänyt kaikki flexbox-ominaisuudet kokonaan pois tyylistä ja tehnyt kohtaukseni reagoivammaksi.

Ajatuksia?

En ole React-asiantuntija, mutta olen viettänyt vuoden React Native -tapahtuman kanssa, ja tämä on minulle järkevää. Onko olemassa parempi tapa toteuttaa tämä? Todennäköisesti. Onko se anti-malli? Ehkä. Haluaisin kuulla, mitä ihmiset ajattelevat.