Reageeri Native - puutetundlikud ja ekraanimõõdud

React Native muudab nii Androidi kui ka iOS-i seadmetes töötava rakenduse väljatöötamise palju lihtsamaks kui kunagi varem. Kui enne pidite töötama vähemalt kahe programmeerimiskeele ja tohutult erineva API-ga, sisaldab React Native paketis ka mõnda kasulikku keelt.

Siin on kahest ülevaade, mis aitab teil järgmise rakenduse üles ehitada.

Puudutatavad

Mõned mobiilseadmete peamised omadused on seotud kasutaja puutetundliku suhtlusega. See, kuidas mobiilirakendus nendele vastastikmõjudele reageerib ja neile reageerib, võib muuta või rikkuda kasutaja kogemusi.

Reageerige Native laevad koos Buttonkomponendiga, mis töötab paljude standardsete onPressinteraktsioonide jaoks. Vaikimisi annab see kasutajale tagasisidet, muutes nupu vajutamise läbipaistmatust. Kasutamine:

Keerulisemate kasutusjuhtumite korral on React Native'il sisseehitatud API-d, et hallata nn pressitegevust Touchables.

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

Kõiki neid puudutatavaid komponente saab kujundada ja kasutada koos teegiga, nagu sisseehitatud Animated, mis võimaldab teil teha oma tüüpi kohandatud kasutajate tagasisidet.

Mõned näited nende komponentide kasutamisest:

// with images    // with text  Hello 

Samuti saate hakkama erinevat tüüpi nupuvajutustega. Vaikimisi on nupud ja puutetundlikud seadistused tavaliste puudutuste käsitsemiseks, kuid võite tähistada ka funktsiooni, mis nõuab näiteks vajutamise ja hoidmise interaktsioone.

Kõigi saadaolevate rekvisiitide ja nende komponentide toimimise nägemiseks võite vaadata Touchablsi JavaScripti lähtekoodi siit.

Ekraani mõõtmed

React Native kasutab kasutajaliidese (UI) ja kasutajaliideses kuvatavate andmete suuruse mõõtmiseks punkte Dots Per Inch (DPI). Seda tüüpi mõõtmine võimaldab rakendusel erineda ekraani suuruse ja pikslitiheduse osas.

Tavakasutuse korral saab rakendusi välja töötada ilma, et peaksite tundma kasutaja seadme eripära (näiteks pikslitihedust), kuna kasutajaliidese elemendid laienevad automaatselt.

Kui see on vajalik, on saadaval API-sid, mis PixelRatioaitavad teil teada saada seadme seadme pikslitihedust.

Kasutaja seadme akna või ekraani kõrguse / laiuse saamiseks on React Native'il API Dimensions.

import { Dimensions } from 'react-native';

Siin on DimensionsAPI pakutavad meetodid :

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

Märkus. Dimensioonide API-ga on varem olnud mõned teadaolevad probleemid, näiteks õige teabe tagastamata jätmine, kui kasutaja oma seadet pöörab.Enne rakenduse installimist on parem veenduda, et testite seda tegelikes seadmetes.

Lisateave tundliku disaini kohta:

  • Tasuta tundlik disainikursus
  • Parimad Bootstrapi õpetused tundliku veebidisaini jaoks
  • Kuidas reageerivalt mõelda
  • Juhend tundlike piltide jaoks
  • Õppige tundlikku disaini 5 minutiga