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 TouchableWithoutFeedbackEzen é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