Kuinka kehittää reagoivia käyttöliittymiä React Native - 1x03: n avulla

Tämä tarina on osa sarjaa, jossa jaan kokemuksiani React Native -tapahtumasta: kuinka lähestyin RN-komponentteja, sovellusliittymiä, ulkoisia paketteja ja kaikenlaisia ​​ongelmia ja työskentelin niiden kanssa. Toivon, että tämä viestisarja osoittautuu hyödylliseksi React alkuperäiskansoille ja tarjoaa hyödyllisiä oivalluksia.

MUOKKAA: Tässä selitetty koodi on saatavana kokonaisratkaisuna ilmaisen, avoimen lähdekoodin paketin, nimeltään react-native-responsive-screen, kautta. Tarkista se ja katso kuinka helppoa sitä on käyttää! Hyvää koodausta :-)

Entä reagoiva käyttöliittymä?

Responsiivinen käyttöliittymä on tärkeä! Kukaan käyttöliittymäkehittäjä ei voi kiistää sitä, vaikka suurin osa meistä on jossain vaiheessa kamppaillut toimittaakseen yhden. Nyt React Native -kehittäjänä sinun on toimitettava sama tai hyvin samanlainen tulos monille erikokoisille mobiili- ja tablet-näyttöille, analyyseille, mittakerroille, pikselitiheydelle jne.

Kuva 1: Kuinka reagoiva käyttöliittymä näyttää useissa laitteissa

Kun aloin koodaamaan RN: llä, muistan ajatellut:

Kehyksessä on oltava sisäinen mekanismi reagoitavuuden käsittelemiseksi - jos ei, pahimmassa tapauksessa käytän prosenttimääriä kaikkialla…

Nämä molemmat hypoteesit olivat tosin vääriä ... Ja löysin sen kovalla tavalla, kun aloin kehittää ensimmäistä käyttöliittymääni.

Prosenttiosuus CSS-arvoa EI tueta kokonaan

Vaikka tämä on parantunut paljon yli 1 vuosi sitten, tilanne on edelleen. On CSS-ominaisuuksia, jotka eivät tue prosenttiarvoja RN: ssä, vaikka ne toimivat ”normaalissa” Web-kehityksessä. Mainitsemalla muutama: marginaali, reunan leveys ja reunan säde. Ja jos joku yrittää asettaa prosenttiarvon, RN joko ohittaa sen kokonaan tai sovellus kaatuu.

Parannuksia tehdään ja tukea lisätään ajan myötä. Odottaa kehyksen kiinniottoa on kiellettyä ihmisille, jotka toimivat jo React Native -sovelluksen kanssa tuotantosovelluksissa. Pysy kanssani tutkiaksesi syvemmin muutamia RN-mekanismeja, kuinka ryhmämme keksi ratkaisun ja todellisen esimerkin työstämme.

Reagoi alkuperäiset ja itsenäiset pikselit

Kun koodataan CSS-arvoa "pikselinä" React Native -versiossa, se on tosiasiallisesti riippumattomia pikseliä (dp tai dpi) eikä näyttöpikseliä. Se on erilainen mittayksikkö (todennäköisesti sen käytön innostunut Android-kehityksessä), jota RN käyttää sisäisesti.

Katsotaanpa seuraavaa koodia (käytämme tyylisiä komponenttipaketteja ja syntaksia sen sijaan, että pääsemme suoraan RN StyleSheet -komponenttiin):

const HeaderText = styled.Text`
  padding-top: 20;
  kirjasinkoko: 15;
  kirjasinperhe: Kano;
  leveys: 100%;
  tekstin kohdistaminen: keskusta;
`;

Voit nähdä, että sekä ominaisuudet padding-top että font-size on kirjoitettu tavallisina numeroina ja niiden vieressä ei ole px-jälkiliitettä. Voit löytää näytön todelliset pikselit käyttämällä seuraavaa yhtälöä:

px = dp * scaleFactor

Lisätietoja saat täältä Android-oppaasta pikselitiheyksistä, Android-näytön yhteensopivuudesta ja paintcodeapp -oppaasta iPhonen tarkkuuksille.

Joku voi täällä ajatella, että voimme käyttää riippumattomia pikseliä kaikkialla ja saada etsimäsi reagoivan käyttöliittymän. Valitettavasti näin ei ole, koska scaleFactor riippuu pikselitiheydestä. Voimme kuitenkin kehittää sovelluksen, jolla on itsenäiset pikselit vain, jos kaikilla laitteilla, joita sovellus käyttäisi, olisi sama pikselitiheys (ppi) näytöllä. Todellisuudessa jokainen valmistaja kuitenkin luo omat pikselitiheyttösivunsa.

Keksitään mekanismi reagoivalle käyttöliittymälle

Idea on yksinkertainen. Koska prosenttimäärä ei aina toimi, annetaan "oikea" dp-arvo jokaiselle eri näytölle dynaamisesti. Katsotaanpa esimerkki siitä, miten se tehdään. Alla nähdään Math Warriors Android-pelin Profiili-kohtaus. Keskitytään neljään isoon siniseen laattaan alaosaan:

Kuva 2: Math Warriors Android -pelin profiilikuva

Mitä haluamme saavuttaa tässä, jotta suunnittelumme olisi reagoiva, on, että laattojen haltuunotto on yli 98% näytön leveydestä pp: nä ja 10% näytön korkeudesta pp: nä. Ja niin pitäisi olla jokaisen näytön kohdalla. Tämä tarkoittaa:

Tunnistetaan näytön mitat (leveys, korkeus) dp: nä ja kerrotaan sitten kertoimella - tapauksessamme 98% ja 10% leveydelle ja korkeudelle. Koodimme joustavuuden vuoksi luomme seuraavat 2 toimintoa:

Tuo {mitat, PixelRatio} "reagoi alkuperäisestä";
const widthPercentageToDP = widthPercent => {
  const screenWidth = mitat.get ('ikkuna') .leveys;
  // Muunna merkkijono syötetty desimaalilukuksi
  const elemWidth = parseFloat (leveysPercent);
  palauta PixelRatio.roundToNearestPixel (näytön leveys * elemWidth / 100);
};
const korkeusPercentageToDP = korkeusPercent => {
  const screenHeight = mitat.get ('ikkuna') korkeus;
  // Muunna merkkijono syötetty desimaalilukuksi
  const elemHeight = jäsentävä kelluvuus (korkeusPercent);
palauta PixelRatio.roundToNearestPixel (screenHeight * elemHeight / 100);
};
vie {
  widthPercentageToDP,
  heightPercentageToDP
};

Ja nyt profiilinäkymässä kutsumme funktioita yksinkertaisesti esittämällä argumenttina haluttu prosentuaalinen määrä (leveydelle tai korkeudelle). Yllä olevassa esimerkissä meillä on seuraava koodi (jälleen hankala syntaksi johtuu tyyliteltyjen komponenttien käytöstä):

const Tile = styled.View`
  leveys: $ {widthPercentageToDP ('98% ')};
  korkeus: $ {heightPercentageToDP ('10% ')};
    .
    .
    .
`;

Tällä tavoin voimme luoda dynaamisen tuloksen, joka sopii kaikkiin eri näytön kokoihin!

Testatkaamme esimerkkiämme!

Käyttöliittymäkehityksen tarkistamiseksi meillä on joukko Android-, iOS-emulaattoreita, joiden avulla tarkistamme tulokset. Katsotaanpa kuinka koodimme on muunnettu käyttöliittymään:

Älypuhelimet

Kuvat 3, 4, 5: Profiilinäkymä älypuhelinlaitteissa, joilla on erilainen pikselitiheys, skaalakerroin jne

tabletit

Kuva 6: Profiilinäkymä tablettilaitteissa, joilla on erilainen pikselitiheys, mittakerroin jne

Mitä mieltä sinä olet?

Mitä mieltä olet tästä ratkaisusta? Voit vapaasti tarjota näkökulmasi ja ideasi alla olevaan kommenttiosaan.

MUOKKAA: Tässä selitetty koodi on saatavana kokonaisratkaisuna ilmaisen, avoimen lähdekoodin paketin, nimeltään react-native-responsive-screen, kautta. Tarkista se ja katso kuinka helppoa sitä on käyttää! Hyvää koodausta :-)

Jos nautit tästä artikkelista, paina vapaasti napituspainiketta auttaaksesi muita löytämään sen.

Minusta

Hei, olen Tasos; ohjelmistoinsinööri, joka rakastaa verkkoa ja työskentelee tällä hetkellä paljon React Native- ja React-palveluiden kanssa. Olen Coded Lines-ohjelmistoyrityksen perustaja, joka toteuttaa mobiili- ja verkkohankkeita kokonaisvaltaisesti painottaen sovelluksen sisäistä markkinointia. Jos se kuulostaa etsimältäsi, ota minuun yhteyttä täällä: tasos.maroudas@codedlines.com. Kiitos käynnistä :)