React Native face procesul de dezvoltare a unei aplicații care funcționează atât pe dispozitivele Android, cât și pe cele iOS mult mai ușor decât a fost odată. În timp ce înainte trebuia să lucrați cu cel puțin două limbaje de programare și API-uri foarte diferite, React Native include unele utile de la început.

Iată un rezumat al celor două care vă vor ajuta să vă construiți următoarea aplicație.

Atinse

Unele dintre principalele caracteristici ale dispozitivelor mobile se învârt în jurul interacțiunilor tactile ale utilizatorilor. Modul în care o aplicație mobilă gestionează și răspunde la aceste interacțiuni poate face sau rupe experiența utilizatorului.

Reacționează navele native cu un Button componentă care funcționează pentru multe standarde onPress interacțiuni. În mod implicit, acesta va oferi feedback utilizatorului schimbând opacitatea pentru a afișa butonul a fost apăsat. Utilizare:

<Button onPress={handlePress} title="Submit" />

Pentru cazuri de utilizare mai complexe, React Native are API-uri construite pentru a gestiona interacțiunile de presă numite Touchables.

TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback

Fiecare dintre aceste componente Touchable poate fi stilizată și utilizată cu o bibliotecă, ca și cea încorporată Animated, permițându-vă să creați propriile tipuri de feedback personalizat al utilizatorilor.

Câteva exemple de utilizare a acestor componente:

// with images
<TouchableHighlight onPress={this.handlePress}>
  <Image
    style={styles.button}
    source={require('./logo.png')}
  />
</TouchableHighlight>

// with text
<TouchableHighlight onPress={this.handlePress}>
  <Text>Hello</Text>
</TouchableHighlight>

Puteți gestiona și diferite tipuri de apăsări de butoane. În mod implicit, butoanele și elementele tactile sunt configurate pentru a gestiona atingeri obișnuite, dar puteți indica, de asemenea, o funcție pentru a apela interacțiunile de apăsare și menținere, de exemplu.

<TouchableHighlight onPress={this.handlePress} onLongPress={this.handleLongPress}>

Pentru a vedea toate accesoriile disponibile și modul în care funcționează aceste componente, vă puteți uita la codul sursă JavaScript pentru Touchable aici.

Dimensiuni ecran

React Native folosește Dots Per Inch (DPI) pentru a măsura dimensionarea interfeței cu utilizatorul (UI) și a oricărui element afișat pe interfața de utilizare. Acest tip de măsurare permite unei aplicații să arate uniform pe diferite dimensiuni de ecran și densități de pixeli.

Pentru cazurile de utilizare standard, aplicațiile pot fi dezvoltate fără a fi nevoie să știți specificul dispozitivului utilizatorului (de exemplu, densitatea pixelilor), deoarece elementele UI se vor scala automat.

Când este necesar, există API-uri disponibile, cum ar fi PixelRatio pentru a vă ajuta să aflați densitatea pixelilor dispozitivului utilizatorului.

Pentru a obține înălțimea / lățimea ferestrei sau ecranului dispozitivului unui utilizator, React Native are un API numit Dimensions.

import { Dimensions } from 'react-native';

Iată metodele pe care Dimensions API oferă:

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

Notă: Au existat unele probleme cunoscute în trecut cu API-ul Dimensions, cum ar fi nereturnarea informațiilor corecte atunci când un utilizator își rotește dispozitivul. Cel mai bine este să vă asigurați că testați acest lucru pe dispozitive reale înainte de a implementa o aplicație.

Mai multe informații despre designul receptiv:

  • Curs de proiectare receptiv gratuit
  • Cele mai bune tutoriale Bootstrap pentru design web receptiv
  • Cum să gândești receptiv
  • Ghid pentru imagini receptive
  • Aflați designul receptiv în 5 minute