React Native - Érinthetőek és a képernyő méretei

A React Native sokkal könnyebbé teszi az Android és az iOS eszközökön egyaránt működő alkalmazás fejlesztését, mint korábban. Míg korábban legalább két programozási nyelvvel és nagyon különböző API-kkal kellett dolgoznia, a React Native néhány hasznos nyelvet tartalmaz a dobozból.

Itt van egy kettő kimutatása, amely segít a következő alkalmazás elkészítésében.

Érinthetők

A mobil eszközök néhány fő jellemzője a felhasználói érintéses interakciók körül forog. Az, hogy egy mobilalkalmazás hogyan kezeli és reagál ezekre az interakciókra, megnehezítheti vagy megtörheti a felhasználói élményt.

Reagáljon a Native hajókra egy olyan Buttonkomponenssel, amely számos szokásos onPressinterakcióra alkalmas. Alapértelmezés szerint visszajelzést ad a felhasználónak azáltal, hogy megváltoztatja az átlátszatlanságot a gomb megnyomásának megjelenítéséhez. Használat:

Összetettebb felhasználási esetek esetén a React Native API-kat épít be az úgynevezett sajtóinterakciók kezelésére Touchables.

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

Ezen érinthető összetevők mindegyike stílusozható és használható egy könyvtárral, például a beépítettel Animated, amely lehetővé teszi, hogy egyedi típusú felhasználói visszajelzéseket készítsen.

Néhány példa ezen összetevők használatára:

// with images    // with text  Hello 

Különböző típusú gombnyomásokat is kezelhet. Alapértelmezés szerint a gombok és az érinthetők úgy vannak konfigurálva, hogy kezeljék a szokásos koppintásokat, de jelölhetünk olyan funkciót is, amely például megnyomásra és nyomva tartásra hívja fel az interakciókat.

Az összes elérhető kellék és ezek összetevőinek működésének megtekintéséhez itt tekintheti meg a Touchables JavaScript forráskódját.

Képernyőméretek

A React Native a Dots per inch (DPI) pontot használja a felhasználói felület (UI) és az UI-n megjelenített elemek méretének mérésére. Ez a fajta mérés lehetővé teszi az alkalmazás számára, hogy egységesen nézzen ki a különböző képernyőméretek és pixelsűrűségek között.

A szokásos használati esetekben az alkalmazások úgy fejleszthetők ki, hogy ne kellene ismerniük a felhasználó eszközének sajátosságait (például a pixelsűrűséget), mivel a felhasználói felület elemei automatikusan méreteznek.

Ha szükséges, vannak olyan API-k, PixelRatioamelyek segítséget nyújtanak a felhasználó eszközének pixelsűrűségének kiderítésében.

Ahhoz, hogy megkapja a felhasználó eszközének ablakát vagy képernyőjének magasságát / szélességét, a React Native rendelkezik egy API-val Dimensions.

import { Dimensions } from 'react-native';

Íme az DimensionsAPI által biztosított módszerek :

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

Megjegyzés: Korábban a Dimensions API-val kapcsolatban volt néhány ismert probléma, például az, hogy nem adta vissza a helyes információt, amikor a felhasználó elforgatja az eszközét.A legjobb, ha az alkalmazás telepítése előtt feltétlenül tesztelje ezt tényleges eszközökön.

További információ az adaptív kialakításról:

  • Ingyenes adaptív tervezési tanfolyam
  • A legjobb Bootstrap oktatóanyagok az adaptív webdesignhoz
  • Hogyan kell reagálni gondolkodni
  • Útmutató az érzékeny képekhez
  • 5 perc alatt megtanulhatja az adaptív dizájnt