Reagirajte izvorno - dodirljivi i dimenzije zaslona

React Native čini proces razvijanja aplikacije koja radi i na Android i na iOS uređajima puno lakšim nego što je to bio slučaj nekada. Iako ste prije morali raditi s barem dva programska jezika i uvelike različitim API-ima, React Native uključuje neke korisne one koji nisu iz kutije.

Evo dvostrukog pregleda koji će vam pomoći da napravite sljedeću aplikaciju.

Dodirljivi

Neke od glavnih značajki mobilnih uređaja vrte se oko interakcija korisničkog dodira. Način na koji mobilna aplikacija rukuje i reagira na te interakcije može stvoriti ili prekinuti korisničko iskustvo.

React Native isporučuje se s Buttonkomponentom koja radi za mnoge standardne onPressinterakcije. Prema zadanim postavkama, korisniku će dati povratne informacije promjenom neprozirnosti kako bi se pokazalo da je gumb pritisnut. Upotreba:

Za složenije slučajeve upotrebe, React Native ima ugrađene API-je za obradu tzv Touchables. Interakcija s tiskom .

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

Svaka od ovih dodirnih komponenti može se oblikovati i koristiti s bibliotekom, poput ugrađene Animated, što vam omogućuje stvaranje vlastitih vrsta prilagođenih povratnih informacija korisnika.

Nekoliko primjera korištenja ovih komponenata:

// with images    // with text  Hello 

Možete rukovati i različitim vrstama pritiskanja tipki. Prema zadanim postavkama, gumbi i dodirni uređaji konfigurirani su za rukovanje uobičajenim slavinama, ali na primjer možete označiti i funkciju za pozivanje interakcija pritiskom i držanjem.

Da biste vidjeli sve dostupne rekvizite i kako ove komponente rade, ovdje možete pogledati JavaScript izvorni kod za Touchables.

Dimenzije zaslona

React Native koristi točkice po inču (DPI) za mjerenje veličine korisničkog sučelja (UI) i svega što se prikazuje na korisničkom sučelju. Ova vrsta mjerenja omogućuje aplikaciji da izgleda jednoliko u različitim veličinama zaslona i gustoći piksela.

Za uobičajene slučajeve upotrebe aplikacije se mogu razvijati bez potrebe da se znaju specifičnosti korisnikovog uređaja (na primjer gustoća piksela) jer će se elementi korisničkog sučelja automatski skalirati.

Kad je to potrebno, dostupni su API-ji PixelRatiokoji će vam pomoći da saznate gustoću piksela korisničkog uređaja.

Da bi dobio visinu / širinu prozora ili zaslona korisničkog uređaja, React Native ima API koji se naziva Dimensions.

import { Dimensions } from 'react-native';

Evo metoda koje DimensionsAPI nudi:

Dimensions.get('window').height; Dimensions.get('window').width; Dimensions.get('screen').height; Dimensions.get('screen').width;

Napomena: U prošlosti su bili poznati problemi s API-jem dimenzija, poput nevraćanja ispravnih podataka kada korisnik rotira svoj uređaj.Najbolje je provjeriti je li ovo testirano na stvarnim uređajima prije postavljanja aplikacije.

Više informacija o responzivnom dizajnu:

  • Besplatan tečaj responzivnog dizajna
  • Najbolji vodiči za Bootstrap za responzivni web dizajn
  • Kako razmišljati odgovorno
  • Vodič za responzivne slike
  • Naučite responzivni dizajn za 5 minuta