Μια πρώτη ματιά στο firstBorn, αντιδράστε στο νέο συστατικό πλαίσιο του Native

πρώτης γεννήσεως είναι ένα React Native Component Framework, το οποίο ακολουθεί τη μεθοδολογία σχεδιασμού Atomic Design από τον Brad Frost.

Η έκδοση 1.0.0 δημοσιεύθηκε πρόσφατα ως μονάδα npm την 1η Απριλίου (δεν είναι αστείο αν και ...).

Σε αυτό το άρθρο, θα δούμε μια επίδειξη των υπαρχόντων συστατικών που προσφέρονται από τους νεογέννητους.

Η Μεθοδολογία Σχεδιασμού

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

Σύμφωνα με αυτή τη μεθοδολογία σχεδιασμού, οι φάσεις περιγράφονται ως εξής:

  • Άτομα: Τα βασικά, αυτόνομα στοιχεία, όπως κείμενα, εικονίδια, κουμπιά ή πλαίσια κειμένου.
  • Μόρια: Συνδυασμός διαφορετικών ατόμων, τα οποία από κοινού έχουν καλύτερη λειτουργική αξία. Για παράδειγμα, ένα TextInput με μια ετικέτα κειμένου για να εξηγήσετε το περιεχόμενο ή να εμφανίσετε ένα σφάλμα στα δεδομένα που έχετε εισάγει.
  • Οργανισμοί: Ένας συνδυασμός διαφορετικών μορίων που λειτουργούν μαζί για να σχηματίσουν σύνθετες δομές. Για παράδειγμα, μια μορφή πολλών μορίων TextInput.
  • Πρότυπο: Συνδυασμός διαφορετικών οργανισμών που αποτελούν τη βάση της σελίδας. Αυτό περιλαμβάνει τη διάταξη και το πλαίσιο αυτών των οργανισμών.
  • Σελίδα: Όλα τα παραπάνω λειτουργούν μαζί σε μια ενιαία πραγματική ζωή, δημιουργούν μια σελίδα. Είναι επίσης η πραγματική εφαρμογή του προτύπου.

Ξεκινώντας

Ας δημιουργήσουμε πρώτα μια νέα εφαρμογή Reactive Native χρησιμοποιώντας το CLI:

αντιδρά-native init firstBornExample

Μόλις δημιουργηθεί, μετακινηθείτε στον φάκελο της εφαρμογής:

cd firstBornExample

Για να προσθέσετε το πρώτο άτομο στην εφαρμογή, εγκαταστήστε το ως εξής:

npm i -save @ 99xt / πρώτος γεννημένος

ο πρώτος γεννημένος έχει δύο άλλες εξαρτήσεις που θα χρειαστεί να εγκαταστήσουμε.

npm i - αποθήκευση αντιγράφων δημιουργίας-αντιδράσεων-αντιγράφων-φυσικών-φορέων-εικονιδίων

Στη συνέχεια θα χρειαστεί να ακολουθήσετε αυτόν τον οδηγό για να δημιουργήσετε εικονίδια αντίδρασης-native-vector για την εφαρμογή.

η ομάδα δημιουργίας-αντίδρασης δεν έχει επιπλέον βήματα ρύθμισης.

Και είμαστε καλά να πάμε!

Χρήση

Για να εισαγάγετε τα στοιχεία, η δήλωση θα μοιάζει με αυτή:

εισαγωγή {<όνομα συστατικού στοιχείου>} από "@ 99xt / πρώτης γεννήσεως"

Η ενότητα περιλαμβάνει τα παρακάτω ενσωματωμένα στοιχεία:

Άτομα

Κείμενο

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

 πρωτότοκο παράδειγμα 
Κείμενο (Android)

Εικόνισμα

Το άτομο εικονιδίων είναι χτισμένο πάνω από την κλάση Ionicons αντίδραση-native-vector-icons. Τα Ionicons έρχονται με δύο διαφορετικές παραδόσεις ενός εικονιδίου τόσο για το Android όσο και για το iOS. Αυτή η κλάση θα κάνει το εικονίδιο σύμφωνα με την υποκείμενη πλατφόρμα.

<Όνομα εικονιδίου = "καρδιά" χρώμα = "κόκκινο" />
Εικονίδιο (Android)

Κουμπί

Το άτομο του κουμπιού μπορεί να αποδοθεί με πολλούς τρόπους. Αποδέχεται μόνο τα κείμενα, τα εικονίδια και τις εικόνες ως στοιχεία παιδιού για εμφάνιση. Έχει 3 διαφορετικά μεγέθη, καθώς και 4 διαφορετικές ετικέτες που θα κάνουν το κουμπί σε πολλούς συνδυασμούς.

Κουμπιά (Android)

Εισαγωγή

Το άτομο εισόδου είναι ένα στυλ αντιδραστικού-native TextInput. Εμφανίζει ένα χρωματισμένο περίγραμμα για το χρήστη, εάν η λειτουργία TextInput είναι εστιασμένη. Η μέθοδος onChangeText είναι υποχρεωτική.

<Εισαγωγή placeholder = "Όνομα" onChangeText = {this.handleTextChange} />
...
handleTextChange = (κείμενο) => {
  this.setState ({κείμενο: κείμενο})
}}
Είσοδος (Android)

Αυτό υποστηρίζει επίσης την υποβολή σφάλματος στο χρήστη. Για να χρησιμοποιήσετε αυτή τη λειτουργία, θα χρειαστεί να δημιουργήσετε μια μέθοδο επικύρωσης. Αυτή η μέθοδος πρέπει να επιστρέψει ένα boolean ανάλογα με την εγκυρότητα του εισαγόμενου κειμένου. Ένα τέτοιο σενάριο ελέγχει εάν μια διεύθυνση ηλεκτρονικού ταχυδρομείου ακολουθεί τη συμβατική μορφή. Αυτή η μέθοδος είναι αυτή που πέρασε στην ιδιότητα isValid.

checkInputValidity = (κείμενο) => {
  const regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  επιστροφή regex.test (κείμενο);
}}
...
<Εισαγωγή placeholder = "Email" είναιValid = {this.checkInputValidity} />
Έλεγχος εισόδου (Android)

TextArea

Το άτομο TextArea είναι ένα στυλ αντιδραστικού-native TextInput. Εμφανίζει ένα χρωματισμένο περίγραμμα για το χρήστη, εάν η λειτουργία TextInput είναι εστιασμένη. Αυξάνει επίσης το ύψος με την εισαγωγή περισσότερων δεδομένων.