Mähkige reaalajas olevad komponendid üle

Märkus. See postitus on vana. Ma ei usu, et ma ikkagi ütleksin, et tekstiosade mähkimine on parim tava. Selle asemel määratlesin pool tosinat fondi stiili, mida kasutasin eraldi failina, mida saab importida ja vastavalt vajadusele jaotada stiilide (või emotsioonide) määratlustesse.

Võib arvata, et kuna React Native põhikomponendid on klassid, tuleks neid laiendada. Kuid nagu Dan Abramov on öelnud, pole see nii hea idee. Võiksite juurutada kõrgema järgu komponente, kuid tegelikult vajate vaid selleks, et asendada teatud põhiliste reageerimise algkomponentide kasutamine millegi pisut võimsamaga. Seal tuleb pakkimine kokku.

Pakkides lihtsalt RN-i põhikomponendi natuke kasutajaliidese funktsionaalsust, hoiate oma koodi puhtana ja määrate ka globaalsed omadused. Kogenud RN-i arendajate jaoks vaadake läbi oma stiililehed ja leidke, mitu korda kasutate stiililehte paigutusprobleemide lahendamiseks. Kas soovite sellest lahti saada? Ma tegin. Algajate jaoks loodan, et see postitus aitab teil flexboxi õppida, andes teile tööriista, mis lihtsustab seda märkimisväärselt.

See graafik näitab, kuidas see lühidalt töötab. Vaatan sellest hiljem üle. Kuid kõigepealt tahan mainida, miks on nii oluline, et mässite teatud RN-i põhikomponendid enda kohandatud koodi.

See on vaid näide ühest pakitud komponendist, mida ma armastan kasutada ja millel on avatud allikas. Kuid sagedamini peate oma asju mähkima. Ma seletan.

Olen loonud kaks avaldatud reageerimiskeelega rakendust ja pärast viimase projekti uuesti uurimist otsustasin, et on kolm kolme asja, mida peaksite alati kindlasti mässima.

  1. Tekst
  2. Puudutatav
  3. Vaade

Kui see on selge, tähendab mähkimine, et impordite ja kasutate oma tekstikomponenti src-st RN-i asemel. Teie mähivad selle.

Tekst

Peate teksti ümber pakkima kahel põhjusel. Üks põhjus on see, et te ei soovi sama fondiperet importida ja deklareerida oma rakenduse igas komponendis. Soovite määrata fondi kõigi tekstikomponentide vaikeseadeks või saaksite fontide vahel hõlpsalt vahetada.

Veel üks põhjus räägib suurema probleemiga, millest peate aru saama React Native UI kohta. FontSize on pikslite summa, mis kuvatakse erineva eraldusvõimega seadmetes erinevalt. See kehtib ka kõrguse, laiuse, veerise, polstri ja absoluutse positsioneerimise kohta. Seetõttu tuleks võimaluse korral alati proovida paigutuste jaoks paindlikkust kasutada ja kui mitte, siis peaksite nende omaduste määramisel kaaluma getPixelSizeForLayoutSize kasutamist. See on valus, kuid pidage mõistlikuks proovida kõigepealt kõike flexboxi abil saavutada.

Teksti puhul peate siiski vältima fontSize'i piksliks seadistamist. Näitan teile lihtsalt seda SO postitust laenutades, mida ma kasutan.

Sisuliselt on selline mähkimine tegelikult rekvisiitide kaardistamine stiilidega. Mõni võib seda pidada mustrivastaseks, kuid tulemus on suurepärane vahend minimaalselt mõtlevale arendajale. Teksti importimise asemel veebisaidilt reaalajas importige see hoopis kataloogist / / komponendid/Text.js või kuhu iganes soovite selle paigutada.

Paljastatud rekvisiidid peaksid katma suurema osa teie stiilidest, nii et võib-olla ei pea te stiililehe kirjet üldse looma.

Nii ma seda kasutan. See on üsna puhas ja ma tean, kuidas see tekst välja näeb, ilma et peaksite viitama stiililehele.

Puudutatav

Selle ümbriseks on palju mooduleid, ehkki mitte ühtegi, mis poleks liiga populaarsed, kuid oluline on siiski see, et puudutatavat (NativeFeedback jne) käsitletakse nii iOS-is kui ka Androidis erinevalt, nii et te ei peaks seda Reaktist importima. Pärismaalane. Samuti võite leida palju nupuvajutusi, kuid tavaliselt on nendesse sisse ehitatud stiile

Vaade

Vaate jaoks soovitan vaadata minu reageeriva pärisrea komponenti.

Otsustasin millegi üle pärast seda, kui olin hakanud oma viimase rakenduse kasutajaliidesele uuesti reageerima. Mõistsin, et selle asemel, et leida elemente, mis oleksid korduvkasutatavad ja vääriksid oma deklaratsiooni, otsisin hoopis stseene, mille elemente teistes stseenides ei kasutatud.

Mõtlesin muudele segaduse vähendamise viisidele. Meenus, et pidin seadma flexDirection: rida, kui see oli sageli ainus atribuut, mida seadistada. Alustasin View'i ümbrise loomisega, et just seda teha. Kuid siis märkasin nii mitu korda, kus ma olin kasutanud ainult joondatud elemente ja õigustasin sisu.

Piisab, kui öelda, et ma lõin ümbrise, mis tegi midagi, mida ma poolel teel lootsin. See muutis minu stiililehe deklaratsioonid tarbetuks.

Alustame sellest stseenist. See on profiilihalduskuva. Peale nuppude ja võib-olla logo pole siin korduvkasutatavaid komponente. Seal on ScrollView komponent, mida ma ei plaani tegelikult kuskil mujal rakenduses kasutada.

Nii et selle lehe peamine eesmärk on sisuliselt paigutada elemente, millest suur osa on tekst.

Nii et lehe ülaosa koodi vaadates näete natuke segu tekstisisest stiilidest ja laadilehe kasutamisest. Pole ideaalne, kuid ühe eelised pole mind kunagi veennud mind tavapäraselt ühte või teist välistama.

Muutsin seda natuke, tunnistades lohakust ja ebaõiget stiilikasutust, kuid selline asi juhtus, sest ma ei laskunud kunagi “paremale” viisile stiilide käsitlemiseks. Kuid kas me kuulutame siin ikkagi "stiile"? Kõik väljaspool tekstistiile puudutab tõesti paigutust.

Otsustasin ära vajaduse küsida endalt, kus paigutusstiilidega tegeleda, sest flexboxi puhul pole need tegelikult stiilid. Flexbox väärib omaenda kohta väljaspool stiile, kuna see on nii võimas, kuid sageli valesti mõistetud.

Vaadake, mis juhtub, kui asendame flexboxi paigutuse määramise millegi intuitiivsema ja sisutihedamaga.

Piisavalt lihtne?

Märkused reaalajas rea kohta: Row on vaade koos flexDirection-iga: 'rida' ja ketas seab kõigi lastekomponentide positsiooni telefoninumbri numbrile 5 - ja flex, mida kasutatakse siin loogilisena, seab paindomadus 1-ni.

Kasutades reaalajas natiivi ja ülaltoodud tekstiosa, olen kõik flexboxi atribuudid stiilist täielikult välja viinud ja muutnud oma stseeni reageeritavamaks.

Mõtted?

Ma ei ole ükski Reacti asjatundja, kuid olen veetnud aasta React Native juures ja see on minu jaoks mõistlik. Kas on parem viis selle rakendamiseks? Arvatavasti. Kas see on anti-muster? Võib olla. Mulle meeldiks kuulda, mida inimesed arvavad.