React Native - Touchables και Διαστάσεις οθόνης

Το React Native καθιστά τη διαδικασία ανάπτυξης μιας εφαρμογής που λειτουργεί τόσο σε συσκευές Android όσο και σε iOS πολύ πιο εύκολη από ό, τι κάποτε. Ενώ πριν να χρειαστεί να δουλέψετε με τουλάχιστον δύο γλώσσες προγραμματισμού και πολύ διαφορετικά API, το React Native περιλαμβάνει κάποιες χρήσιμες από το κουτί.

Ακολουθεί μια σειρά από δύο που θα σας βοηθήσουν να δημιουργήσετε την επόμενη εφαρμογή σας.

Touchables

Ορισμένες από τις κύριες δυνατότητες των κινητών συσκευών περιστρέφονται γύρω από τις αλληλεπιδράσεις αφής χρήστη. Ο τρόπος με τον οποίο μια εφαρμογή για κινητά χειρίζεται και ανταποκρίνεται σε αυτές τις αλληλεπιδράσεις μπορεί να δημιουργήσει ή να σπάσει την εμπειρία του χρήστη.

Αντιδράστε τα εγγενή πλοία με ένα Buttonστοιχείο που λειτουργεί για πολλές τυπικές onPressαλληλεπιδράσεις. Από προεπιλογή, θα δώσει τα σχόλια του χρήστη αλλάζοντας την αδιαφάνεια για να δείξει ότι το κουμπί έχει πατηθεί. Χρήση:

Για πιο περίπλοκες περιπτώσεις χρήσης, το React Native έχει ενσωματωμένα API για τον χειρισμό αλληλεπιδράσεων τύπου που ονομάζονται Touchables.

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

Κάθε ένα από αυτά τα στοιχεία με δυνατότητα αφής μπορεί να διαμορφωθεί και να χρησιμοποιηθεί με μια βιβλιοθήκη, όπως η ενσωματωμένη Animated, επιτρέποντάς σας να δημιουργήσετε τους δικούς σας τύπους προσαρμοσμένων σχολίων από τους χρήστες.

Μερικά παραδείγματα χρήσης αυτών των στοιχείων:

// with images    // with text  Hello 

Μπορείτε επίσης να χειριστείτε διαφορετικούς τύπους πατημάτων κουμπιών. Από προεπιλογή, τα κουμπιά και τα αφής είναι διαμορφωμένα ώστε να χειρίζονται τακτικές βρύσες, αλλά μπορείτε επίσης να υποδηλώσετε μια συνάρτηση για να ζητήσετε αλληλεπιδράσεις τύπου τύπου «παρατεταμένα».

Για να δείτε όλα τα διαθέσιμα στηρίγματα και πώς λειτουργούν αυτά τα στοιχεία, μπορείτε να δείτε τον πηγαίο κώδικα JavaScript για Touchables εδώ.

Διαστάσεις οθόνης

Το React Native χρησιμοποιεί κουκκίδες ανά ίντσα (DPI) για τη μέτρηση του μεγέθους του περιβάλλοντος εργασίας χρήστη (UI) και οτιδήποτε εμφανίζεται στο περιβάλλον χρήστη. Αυτός ο τύπος μέτρησης επιτρέπει σε μια εφαρμογή να φαίνεται ομοιόμορφη σε διάφορα μεγέθη οθόνης και πυκνότητα pixel.

Για τυπικές περιπτώσεις χρήσης, οι εφαρμογές μπορούν να αναπτυχθούν χωρίς να χρειάζεται να γνωρίζουν τις ιδιαιτερότητες της συσκευής του χρήστη (για παράδειγμα, πυκνότητα εικονοστοιχείων) καθώς τα στοιχεία της διεπαφής χρήστη θα κλιμακωθούν αυτόματα.

Όταν απαιτείται, υπάρχουν διαθέσιμα API, PixelRatioγια να σας βοηθήσουν να μάθετε την πυκνότητα των pixel της συσκευής του χρήστη.

Για να λάβετε το παράθυρο ή το ύψος / το πλάτος της οθόνης μιας συσκευής χρήστη, το React Native έχει ένα API που ονομάζεται Dimensions.

import { Dimensions } from 'react-native';

Ακολουθούν οι μέθοδοι που Dimensionsπαρέχει το API:

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

Σημείωση: Υπήρξαν κάποια γνωστά προβλήματα στο παρελθόν με το API διαστάσεων, όπως η μη επιστροφή των σωστών πληροφοριών όταν ένας χρήστης περιστρέφει τη συσκευή του.Είναι καλύτερο να βεβαιωθείτε ότι το δοκιμάζετε σε πραγματικές συσκευές πριν από την ανάπτυξη μιας εφαρμογής.

Περισσότερες πληροφορίες σχετικά με την απόκριση σχεδίασης:

  • Δωρεάν μάθημα σχεδιασμού απόκρισης
  • Καλύτερα σεμινάρια Bootstrap για αποκριτική σχεδίαση ιστοσελίδων
  • Πώς να σκέφτεστε με ανταπόκριση
  • Οδηγός για αποκριτικές εικόνες
  • Μάθετε την απόκριση σχεδίασης σε 5 λεπτά