Kuidas arendada reageerivaid kasutajaliideseid rakendusega React Native - 1x03

See lugu on osa sarjast, kus jagan oma kogemusi React Native kohta: kuidas ma lähenesin RN-i komponentidele, API-dele, välispakettidele ja igasugustele probleemidele ning töötasin nendega. Loodan, et see postituste seeria osutub kasulikuks reaalajaskonnale ja pakub kasulikku teavet.

EDIT: Siin selgitatud kood on saadaval terviklahendusena tasuta avatud lähtekoodiga paketi kaudu, mida nimetatakse react-native-responsive-screen. Vaata seda ja leia, kui lihtne seda kasutada on! Õnnelik kodeerimine :-)

Aga reageeriv kasutajaliides?

Vastuvõtlik kasutajaliides on oluline! Ükski kasutajaliidese arendaja ei saa seda eitada, ehkki enamik meist on ühel hetkel vaeva näinud selle nimel, et seda pakkuda. React Native arendajana peate nüüd edastama sama või väga sarnase tulemuse paljude erineva suurusega mobiiltelefonide ja tahvelarvutite ekraanide, analüüsi, skaalafaktori, pikslitiheduse jms korral.

Pilt 1: kuidas reageeriv kasutajaliides näeb välja mitmes seadmes

Kui hakkasin RN-iga kodeerima, mäletan, et mõtlesin:

Reageerimisele reageerimiseks peab olema raamistiku sisemine mehhanism - kui ei, siis halvima stsenaariumi korral kasutan protsente kõikjal ...

Mõlemad hüpoteesid olid küll valed ... Ja avastasin selle raske tee, kui hakkasin oma esimest kasutajaliidest arendama.

CSS-i protsentuaalset väärtust EI toetata täielikult

Ehkki see on 1+ aasta taguse ajaga palju paranenud, on see siiski nii. On CSS-i atribuute, mis ei toeta protsentuaalseid väärtusi RN-is, ehkki need toimivad „tavalises” veebiarenduses. Mõningaid mainimata: veeris, ääre laius ja raadiuse raadius. Ja kui keegi proovib protsentuaalset väärtust seada, ignoreerib RN seda täielikult või rakenduse krahh.

Parandatakse ja aja möödudes lisatakse tuge. Raamistiku järelejõudmise ootamine on aga nende inimeste jaoks, kes juba töötavad koos React Native'iga tootmisrakendustes, keelamine. Jääge minu juurde, et uurida põhjalikumalt mõnda RN-i mehhanismi, kuidas meie meeskond välja mõeldi lahendus ja tõeline näide meie tööst.

Reageerige natiivseid ja sõltumatuid piksleid

CSS-i väärtuse kodeerimisel reaalajas natiivi pikslites on tegemist tegelikult sõltumatute pikslitega (dp või dpi), mitte ekraanipikslitega. See on erinev mõõtühik (tõenäoliselt inspireeritud selle kasutamisest Androidi arendamisel), mida RN kasutab sisemiselt.

Vaatame järgmist koodi (otse RN StyleSheet-i komponendi juurde pääsemise asemel kasutame stiilis komponentide paketti ja süntaksit):

const HeaderText = styled.Text`
  polsterdus: 20;
  kirjasuurus: 15;
  fondiperekond: Kano;
  laius: 100%;
  teksti joondamine: keskel;
`;

Näete, et mõlemad omadused - polsterdus ülaosas ja fondi suurus - on kirjutatud tavaliste numbritena ja nende kõrval pole px-järelliidet. Ekraani tegelike pikslite leidmiseks võime kasutada järgmist võrrandit:

px = dp * scaleFactor

Lisateabe saamiseks leiate siit Androidi pikslitiheduse juhendi, Androidi ekraani ühilduvuse ülevaate ja paintcodeapp'i juhendi iPhone'i eraldusvõime kohta.

Keegi võib siin mõelda, et võime kasutada sõltumatuid piksleid kõikjal ja saada reageeriv kasutajaliides, mida otsime. Kahjuks pole see nii, sest scaleFactor sõltub pikslite tihedusest. Sellegipoolest saaksime sõltumatute pikslitega rakenduse välja töötada ainult siis, kui kõigil seadmetel, mida see rakendus töötaks, oleks nende ekraanidel sama pikslitihedus (ppi). Tegelikult loob iga tootja siiski oma pikslitiheduse ekraanid.

Tuleme välja reageeriva kasutajaliidese mehhanism

Idee on lihtne. Kuna protsent ei toimi alati, anname dünaamiliselt igale erinevale ekraanile “õige” dp-väärtuse. Vaatame näide sellest, kuidas seda teha. Altpoolt näeme profiili stseeni Math Warriors Android-mängust. Keskendume neljale suurele sinisele plaadile allosas:

Pilt 2: Math Warriors Android-mängu profiilistseen

Mida me tahame siin saavutada, et meie kujundus oleks reageeriv, on see, et plaadid võtaksid üle 98% ekraani laiusest pp-des ja 10% ekraani kõrgusest pp-des. Ja see peaks nii olema iga ekraani puhul. See tähendab:

Identifitseerime ekraani mõõtmed (laius, kõrgus) protsentides ja korrutame seejärel koefitsiendiga - meie puhul vastavalt 98% ja 10% laiuse ja kõrguse osas. Meie koodi paindlikkuse huvides loome järgmised kaks funktsiooni:

importige {dimensioonid, PixelRatio} rakendusest 'react-native';
const widthPercentageToDP = widthPercent => {
  const screenWidth = Dimensions.get ('aken'). laius;
  // Teisendage stringi sisend kümnendarvuks
  const elemWidth = parseFloat (laiusPercent);
  tagastage PixelRatio.roundToNearestPixel (ekraani laius * elem laius / 100);
};
const heightPercentageToDP = heightPercent => {
  const screenHeight = Dimensions.get ('aken') .kõrgus;
  // Teisendage stringi sisend kümnendarvuks
  const elemHeight = järskFloat (kõrgusPercent);
tagastage PixelRatio.roundToNearestPixel (screenHeight * elemHeight / 100);
};
eksport {
  widthPercentageToDP,
  heightPercentageToDP
};

Ja nüüd kutsume oma profiilivaates funktsioone lihtsalt, esitades argumendina soovitud protsendimäära (laiuse või kõrguse jaoks). Ülaltoodud näite jaoks on meil järgmine kood (jällegi on ebamugav süntaks stilistiliste komponentide kasutamise tõttu):

const Tile = stiilis.Vaata`
  laius: $ {widthPercentageToDP ('98% ')};
  kõrgus: $ {heightPercentageToDP ('10% ')};
    .
    .
    .
`;

Nii saame luua dünaamilise tulemuse, mis sobib kõigile ekraanisuurustele!

Proovime meie näidet!

Kasutajaliidese arengu kontrollimiseks on meil Androidi, iOS-i emulaatorite komplekt, mida kasutame tulemuste kontrollimiseks. Vaatame, kuidas meie kood on UI-ks muudetud:

Nutitelefonid

Pildid 3, 4, 5: Profiilivaade nutitelefonides, millel on erinev pikslitihedus, skaalategur jne

Tabletid

Pilt 6: Profiilivaade erineva pikslitiheduse, mastaabiteguri jms tahvelarvutites

Mida sa arvad?

Mida arvate sellest lahendusest? Pakkuge julgelt oma vaatenurka ja ideid allpool olevasse kommentaaride jaotisse.

EDIT: Siin selgitatud kood on saadaval terviklahendusena tasuta avatud lähtekoodiga paketi kaudu, mida nimetatakse react-native-responsive-screen. Vaata seda ja leia, kui lihtne seda kasutada on! Õnnelik kodeerimine :-)

Kui teile see artikkel meeldis, siis klõpsake seda plaksutusnuppu free, et teised seda üles leiaksid.

Minust

Tere, ma olen Tasos; tarkvarainsener, kes armastab veebi ja teeb praegu palju koostööd React Native ja React abil. Olen tarkvaraagentuuri Coded Lines kaasasutaja, kus viime läbi mobiili- ja veebiprojekte, keskendudes rakendusesisesele turundusele. Kui see kõlab, mida otsite, võtke minuga ühendust siin: tasos.maroudas@codedlines.com. Täname, et peatusite :)