Μέθοδοι συνόλου: Κομψές τεχνικές για την παραγωγή βελτιωμένων αποτελεσμάτων μηχανικής εκμάθησης
Επιστήμη Δεδομένων Και Βάσεις Δεδομένων
Όταν ανακοινώθηκε το React Native, οι πρώτες αντιδράσεις ήταν εξαιρετικά θετικές. Παραδοσιακά, όταν σκεφτόμαστε τις τεχνολογίες ιστού στον χώρο των κινητών, πράγματα όπως Apache Cordova έρχονται στο μυαλό, που μας επιτρέπουν να συσκευάζουμε ιστότοπους ή εφαρμογές ιστού ως εφαρμογές για πλατφόρμες για κινητά. Σε αυτό το σεμινάριο για αρχάριους, θα ρίξουμε μια ματιά στην αρχιτεκτονική του React Native, τη φιλοσοφία πίσω από το React Native και πώς διαφέρει από άλλες λύσεις στον ίδιο χώρο. Μέχρι το τέλος του άρθρου, θα έχουμε μετατρέψει μια εφαρμογή React 'Hello World' σε μια εφαρμογή React Native.
Ας ξεκινήσουμε λέγοντας αυτό Αντιδράστε εγγενείς είναι μια σχετικά νέα τεχνολογία. Είναι επίσημα διαθέσιμο από τον Μάρτιο του 2015, από ιδιωτική έκδοση beta από την αρχή του ίδιου έτους και χρησιμοποιήθηκε εσωτερικά στο Facebook για λίγο πριν από αυτό. Το ρητό «Η Ρώμη δεν χτίστηκε σε μια μέρα» ισχύει γενικά και για την τεχνολογία. Εργαλεία όπως grunt και πλατφόρμες όπως το Node.js χρειάστηκαν χρόνια για να ωριμάσουν. Στον κόσμο του διαδικτύου, τα πράγματα κινούνται γρήγορα και με έναν τεράστιο αριθμό πλαισίων, πακέτων και εργαλείων που βγαίνουν καθημερινά, προγραμματιστές τείνουν να γίνουν λίγο πιο σκεπτικοί και δεν θέλουν να πηδήξουν σε κάθε φανταχτερή μόδα για να συνειδητοποιήσουν ότι κατέληξαν σε μια κατάσταση κλειδώματος προμηθευτή. Θα αναφερθούμε σε αυτό που κάνει το React Native ξεχωριστό, γιατί είναι μια τεχνολογία που αξίζει να μπει και θα καλύψουμε μερικές περιπτώσεις όπου δεν είναι όλοι μονόκεροι και ουράνια τόξα.
Κάτω από την κουκούλα
Όταν μιλάμε για τεχνολογίες ιστού σε κινητά, οι διαθέσιμες λύσεις εμπίπτουν συνήθως σε μία από τις ακόλουθες κατηγορίες.
Ομαδοποίηση εφαρμογών ιστού σε πρόγραμμα περιήγησης ιστού για κινητά
Η εφαρμογή ιστού ζει σε ένα πρόγραμμα περιήγησης για κινητά, που συνήθως ονομάζεται WebView. Χωρίς καμία σημαντική αναδιαμόρφωση, ένας ιστότοπος ή μια εφαρμογή Ιστού λειτουργεί στην κινητή συσκευή. Ίσως χρειαστεί να λάβουμε υπόψη τα γεγονότα του προγράμματος περιήγησης για κινητά, όπως το πάτημα ή την ακρόαση αλλαγών προσανατολισμού συσκευής και τη μικρότερη οθόνη για μια πλήρη εμπειρία χρήστη, αλλά έχουμε μια λειτουργική έκδοση για κινητά με ελάχιστη προσπάθεια. Το Cordova / PhoneGap είναι η πιο δημοφιλής επιλογή σε αυτήν την κατηγορία. Δυστυχώς, αυτή η επιλογή έχει μεγάλο μειονέκτημα: σε ορισμένες περιπτώσεις, οι εφαρμογές που αναπτύχθηκαν χρησιμοποιώντας το Cordova είναι σημαντικά βραδύτερες από τις εγγενείς εφαρμογές, ειδικά για εφαρμογές με γραφικό βάρος. Σε άλλες περιπτώσεις, το λειτουργικό σύστημα για κινητά δεν παρέχει όλες τις δυνατότητες στο WebView που είναι διαθέσιμες στο πρόγραμμα περιήγησης για κινητά. Η εμπειρία χρήστη μπορεί επίσης να διαφέρει από τις εγγενείς εφαρμογές. Αυτό μπορεί να συμβεί λόγω της εφαρμογής ή της ίδιας της πλατφόρμας. Αυτό το πρόβλημα μπορεί να κυμαίνεται από γραμμές κύλισης που δεν έχουν την ίδια αίσθηση έως να σημειωθεί καθυστέρηση όταν πατάτε στοιχεία.
Σύνταξη σε εγγενείς τεχνολογίες
Μια εντελώς διαφορετική λύση είναι να δημιουργήσετε μια εγγενή βάση κώδικα στο τέλος. Αυτό συμβαίνει μετατρέποντας τον αρχικό πηγαίο κώδικα σε άλλη γλώσσα προγραμματισμού. Εμπορευόμαστε την εγγενή απόδοση για ένα επίπεδο αφαίρεσης με κάποιες αβεβαιότητες. Σε περιπτώσεις λύσεων κλειστού κώδικα, δεν είμαστε καν σίγουροι για το τι συμβαίνει κάτω από την κουκούλα και με τι είδους μαύρο κουτί αντιμετωπίζουμε. Σε άλλες περιπτώσεις, δεν είμαστε σίγουροι πόσο η επόμενη ενημέρωση του λειτουργικού συστήματος για κινητά θα σπάσει τον κώδικα μας και πότε θα είναι διαθέσιμες διορθώσεις ή ενημερώσεις. Ένα δημοφιλές παράδειγμα αυτής της κατηγορίας θα ήταν Χαξ .
Χρήση επιπέδου JavaScript
Εδώ, χρησιμοποιούμε τη μηχανή JavaScript του περιβάλλοντος κινητής τηλεφωνίας και εκτελούμε τη JavaScript μας εκεί. Τα εγγενή στοιχεία ελέγχου αντιστοιχίζονται σε αντικείμενα και λειτουργίες JavaScript, οπότε όταν επρόκειτο να καλέσουμε μια συνάρτηση που ονομάζεται fancyButtonRightHere(), θα εμφανιστεί ένα κουμπί στην οθόνη. Το NativeScript ή το Appcelerator Titanium είναι γνωστά παραδείγματα αυτής της κατηγορίας.
Το React Native θα μπορούσε να χαρακτηριστεί ως κάτι από την τρίτη κατηγορία. Για τις εκδόσεις iOS και Android, το React Native χρησιμοποιεί το JavaScriptCore κάτω από την κουκούλα, που είναι η προεπιλεγμένη μηχανή JavaScript στο iOS. Το JavaScriptCore είναι επίσης η μηχανή JavaScript στα προγράμματα περιήγησης Safari της Apple. OS X και Προγραμματιστές iOS μπορεί πραγματικά να επικοινωνήσει απευθείας με αυτό εάν το θέλει.
Μια μεγάλη διαφορά είναι ότι Αντιδράστε εγγενείς εκτελεί τον κώδικα JavaScript σε ξεχωριστό νήμα, έτσι ώστε το περιβάλλον εργασίας χρήστη να μην αποκλείει και οι κινούμενες εικόνες πρέπει να είναι μεταξένιες και ομαλές.
Το React είναι το βασικό χαρακτηριστικό
Αξίζει να σημειωθεί ότι το 'React' στο React Native δεν τοποθετείται εκεί κατά λάθος. Για το React Native, χρειαζόμαστε μια κατανόηση του τι ακριβώς προσφέρει το React. Οι ακόλουθες έννοιες λειτουργούν το ίδιο τόσο στο React όσο και στο React Native, αν και αυτά τα παραδείγματα κώδικα είναι προσαρμοσμένα ώστε να εκτελούνται στο πρόγραμμα περιήγησης.
Σημείο εισόδου μονής απόδοσης
Όταν ρίχνουμε μια ματιά σε ένα απλό στοιχείο React, το πρώτο πράγμα που μπορεί να παρατηρήσουμε είναι ότι το στοιχείο έχει render λειτουργία. Στην πραγματικότητα, το React ρίχνει ένα σφάλμα εάν δεν υπάρχει καθορισμένη συνάρτηση απόδοσης μέσα στο στοιχείο.
var MyComponent = function() { this.render = function() { // Render something here }; }; Το ιδιαίτερο είναι ότι δεν ταιριάζουμε με στοιχεία DOM εδώ, αλλά επιστρέφουμε μια κατασκευή που βασίζεται σε XML που αντιπροσωπεύει αυτό που θα αποδίδεται στο DOM. Αυτή η κατασκευή που βασίζεται σε XML ονομάζεται JSX.
var MyComponent = function() { this.render = function() { return Hello there ; }; }; Ένας ειδικός μετασχηματιστής JSX παίρνει όλο αυτόν τον κώδικα που φαίνεται XML και τον μετατρέπει σε λειτουργίες. Αυτό θα είναι το στοιχείο μετά τον μετασχηματισμό:
var MyComponent = function() { this.render = function() { return React.createElement('div', { className: 'my-component' }, 'Hello there'); }; }; Το μεγαλύτερο πλεονέκτημα είναι ότι ρίχνοντας μια γρήγορη ματιά στο στοιχείο, ξέρουμε πάντα τι πρέπει να κάνει. Για παράδειγμα, το συστατικό μπορεί να αποδώσει έναν αριθμό συστατικών. Δεν μπορούμε να αποδώσουμε τα στοιχεία μας οπουδήποτε αλλού παρά στο render λειτουργία, οπότε δεν υπάρχει ποτέ η ανησυχία ότι δεν ξέρουμε από πού ακριβώς προήλθε το συστατικό μας.
Μονοκατευθυντική ροή δεδομένων
Για να δημιουργήσετε το περιεχόμενο ενός στοιχείου, το React παρέχει σύντομες ιδιότητες ή στηρίγματα. Παρόμοια με τα χαρακτηριστικά XML, περνάμε τα στηρίγματα απευθείας σε ένα στοιχείο και στη συνέχεια μπορούμε να χρησιμοποιήσουμε τα στηρίγματα μέσα στο κατασκευασμένο στοιχείο.
var Hello = function(props) { this.render = function() { return Hello {props.name} ; }; }; var Greeter = function() { this.render = function() { return } }; Αυτό οδηγεί στο ότι τα στοιχεία μας βρίσκονται σε δομή που μοιάζει με δέντρο και επιτρέπεται να διαβιβάζουμε δεδομένα μόνο όταν κατασκευάζουμε θυγατρικά στοιχεία.
Επανεισάγετε τις αλλαγές
Εκτός από τα στηρίγματα, τα στοιχεία μπορούν επίσης να έχουν εσωτερική κατάσταση. Το πιο εμφανές παράδειγμα αυτής της συμπεριφοράς θα ήταν ένας μετρητής κλικ που ενημερώνει την αξία του όταν πατηθεί ένα κουμπί. Ο ίδιος ο αριθμός των κλικ θα αποθηκευτεί στην πολιτεία.
Κάθε αλλαγή στηρίγματος και κατάστασης ενεργοποιεί μια πλήρη εκ νέου απόδοση του στοιχείου.
Εικονικό DOM
Τώρα, όταν τα πάντα επανεμφανίζονται όταν αλλάζουν τα στηρίγματα ή η κατάσταση, πώς το ίδιο το React αποδίδει τόσο καλά; Το μαγικό συστατικό είναι το 'Virtual DOM'. Κάθε φορά που απαιτείται κάτι για εκ νέου απόδοση, δημιουργείται μια εικονική αναπαράσταση του ενημερωμένου DOM. Το Virtual DOM αποτελείται από ελαφρές αναπαραστάσεις στοιχείων που έχουν διαμορφωθεί σύμφωνα με το δέντρο στοιχείων, καθιστώντας τη διαδικασία δημιουργίας τους πολύ πιο αποτελεσματική από τη δημιουργία πραγματικών στοιχείων DOM. Πριν από την εφαρμογή των αλλαγών στο πραγματικό DOM, γίνονται έλεγχοι για να προσδιοριστεί πού ακριβώς έγινε στο δέντρο συνιστώσας οι αλλαγές, δημιουργείται μια διαφορά και εφαρμόζονται μόνο αυτές οι συγκεκριμένες αλλαγές.
javascript λήψη ημερομηνίας και ώρας
Ξεκινώντας με αυτό το React Native Tutorial
Υπάρχουν ορισμένες προϋποθέσεις που πρέπει να δημιουργήσουν οι αρχάριοι προκειμένου να αναπτυχθούν για το React Native. Δεδομένου ότι το iOS ήταν η πρώτη πλατφόρμα που υποστηρίζεται και αυτή που καλύπτουμε σε αυτό το σεμινάριο, χρειαζόμαστε macOS και Xcode, τουλάχιστον την έκδοση 6.3. Απαιτείται επίσης το Node.js. Αυτό που βοηθάει είναι η εγκατάσταση Φρουρός μέσω του διαχειριστή πακέτων Brew με brew install watchman. Αν και αυτό δεν είναι απαραίτητα, βοηθάει στην αντιμετώπιση πολλών αρχείων στο έργο React Native.
Για να εγκαταστήσετε το React Native, απλά πρέπει εγκαταστήστε την εφαρμογή γραμμής εντολών React Native με npm install -g react-native-cli. Κλήση του react-native Στη συνέχεια, η εντολή μας βοηθά να δημιουργήσουμε μια νέα εφαρμογή React Native. Τρέξιμο react-native init HelloWorld δημιουργεί ένα φάκελο που ονομάζεται HelloWorld στον οποίο μπορεί να βρεθεί ο κωδικός λέβητας.
Μετασχηματισμός μιας εφαρμογής React
Καθώς το React είναι το βασικό χαρακτηριστικό και οι βασικές αρχές που προέρχονται από τη βιβλιοθήκη του React, ας ρίξουμε μια ματιά σε αυτό που χρειαζόμαστε για να μετατρέψουμε μια ελάχιστη εφαρμογή React “Hello World” σε μια εφαρμογή React Native.
Χρησιμοποιούμε ορισμένες δυνατότητες ES2015 σε αυτό το παράδειγμα κώδικα, συγκεκριμένα τάξεις. Είναι απολύτως εφικτό να κολλήσετε με React.createClass ή χρησιμοποιήστε μια φόρμα λειτουργίας παρόμοια με το δημοφιλές μοτίβο λειτουργικής μονάδας.
var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content')); Βήμα 1: Αγκαλιάστε τις ενότητες CommonJS
Στο πρώτο βήμα πρέπει να αλλάξουμε απαιτώντας τη χρήση της μονάδας React react-native αντι αυτου.
var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content')); Αυτό που συνήθως είναι μέρος του αγωγού εργαλείων κατά την ανάπτυξη μιας εφαρμογής web React είναι αναπόσπαστο μέρος του React Native.
Βήμα 2: Δεν υπάρχει DOM
Δεν αποτελεί έκπληξη το γεγονός ότι δεν υπάρχει DOM στο κινητό. Όπου χρησιμοποιήσαμε προηγουμένως, πρέπει να χρησιμοποιήσουμε και όπου χρησιμοποιήσαμε , το στοιχείο που χρειαζόμαστε εδώ είναι.
import React from ‘react'; import {View, Text, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(‘hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content')); Αν και είναι πολύ βολικό να τοποθετείτε κείμενο απευθείας σε στοιχεία, το κείμενο στον εγγενή κόσμο δεν μπορεί να τοποθετηθεί απευθείας σε. Για αυτό πρέπει να εισαγάγουμε ένα στοιχείο.
import React from ‘react'; import {View, Text, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(‘hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content')); Βήμα 3: Τα ενσωματωμένα στυλ είναι ο τρόπος να πάτε
Το React Native μας επιτρέπει να χρησιμοποιούμε τη μοντελοποίηση Flexbox αντί να αναπαράγουμε το float και inline-block που είμαστε τόσο εξοικειωμένοι με τον κόσμο του διαδικτύου. Το ενδιαφέρον είναι ότι το React Native δεν χρησιμοποιεί CSS.
import React from ‘react'; import {View, Text, StyleSheet, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(‘hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(, document.getElementById('content')); Η χρήση ενσωματωμένων στυλ φαίνεται να προκαλεί σύγχυση στους αρχάριους. Είναι παρόμοιο με τη μετάβαση που έπρεπε να περάσουν οι προγραμματιστές του React όταν αντιμετώπιζαν το JSX και χρησιμοποιούσαν προηγουμένως μηχανές templating όπως Handlebars ή Jade.
Η ιδέα είναι ότι δεν έχουμε φύλλα στυλ παγκοσμίως στον τρόπο που χρησιμοποιούμε CSS. Δηλώνουμε τα φύλλα στυλ απευθείας σε επίπεδο συστατικών και έτσι έχουμε όλες τις πληροφορίες που χρειαζόμαστε για να δούμε τι κάνει το στοιχείο μας, τη διάταξη που δημιουργεί και τα στυλ που εφαρμόζει.
import React from ‘react'; import {Text} from ‘react-native'; var Headline = function(props) { this.render = () => {props.caption}; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline; Βήμα 4: Διαχείριση συμβάντων
Το ισοδύναμο με το κλικ σε ιστοσελίδες είναι το πάτημα ενός στοιχείου στην κινητή συσκευή. Ας αλλάξουμε τον κώδικά μας έτσι ώστε η 'ειδοποίηση' να εμφανίζεται όταν πατάμε το στοιχείο.
import React from ‘react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('Hi!') } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(, document.getElementById('content')); Αντί τα συμβάντα να είναι άμεσα διαθέσιμα σε στοιχεία, πρέπει να χρησιμοποιήσουμε ρητά στοιχεία που ενεργοποιούν συμβάντα, στην περίπτωσή μας ένα συμβάν αφής όταν πατάμε την προβολή. Υπάρχουν διάφοροι τύποι εξαρτημάτων με δυνατότητα αφής, καθένας από τους οποίους παρέχει διαφορετική οπτική ανατροφοδότηση.
Βήμα 5: Προσαρμογή συμπεριφοράς σε όλες τις πλατφόρμες
Είναι δυνατό να εντοπιστεί σε ποια πλατφόρμα εκτελείται η εφαρμογή React Native, αποκτώντας πρόσβαση στην τιμή Platform.OS. Ας πούμε ότι, στο παραπάνω παράδειγμα, θέλαμε να εμφανίσουμε ένα διαφορετικό μήνυμα προειδοποίησης με βάση την πλατφόρμα στην οποία εκτελούμε. Μπορούμε να το κάνουμε έτσι:
... clickMe() { var message = ‘'; if(Platform.OS == ‘ios') { message = ‘Welcome to iOS!'; } else if(Platform.OS == ‘android') { message = ‘Welcome to Android!'; } Alert.alert(message); } ... Εναλλακτικά, το select Η μέθοδος είναι επίσης διαθέσιμη, η οποία παρέχει μια σύνταξη τύπου διακόπτη:
… clickMe() { Alert.alert(Platform.select({ ios: ‘Welcome to iOS!', android: ‘Welcome to Android!' }) ); } ... Βήμα 6: Προσαρμοσμένες γραμματοσειρές και react-native link
Για να προσθέσουμε μια προσαρμοσμένη γραμματοσειρά, πρέπει να περάσουμε από κάποια στεφάνια. Πρώτα απ 'όλα, βεβαιωθείτε ότι το πλήρες όνομα της γραμματοσειράς και το όνομα αρχείου της γραμματοσειράς είναι τα ίδια: Το iOS θα χρησιμοποιήσει το πλήρες όνομα της γραμματοσειράς για να πάρει τη γραμματοσειρά, ενώ το Android χρησιμοποιεί το όνομα αρχείου.
Επομένως, εάν το πλήρες όνομα της γραμματοσειράς σας είναι myCustomFont, βεβαιωθείτε ότι το όνομα αρχείου της γραμματοσειράς είναι myCustomFont.ttf.
Μετά από αυτό, πρέπει να δημιουργήσουμε έναν φάκελο στοιχείων και να τον δείξουμε npm. Μπορούμε να το κάνουμε δημιουργώντας πρώτα το φάκελο, κάτω από το assets/fonts στον ριζικό κατάλογο της εφαρμογής. Οποιοσδήποτε άλλος κατάλογος θα κάνει, αλλά αυτό είναι το συμβατικό όνομα που χρησιμοποιείται για τον κατάλογο γραμματοσειρών.
Οι αντικειμενοστρεφείς γλώσσες προγραμματισμού δεν χρησιμοποιούνται πλέον από τους προγραμματιστές λογισμικού.
Μπορούμε να πούμε npm πού έχουμε τα περιουσιακά μας στοιχεία προσθέτοντας ένα Assets ιδιοκτησία στην ενότητα ενοποίησης npm της React, rnpm:
'rnpm': { 'Assets': [ './assets/fonts/' ] } Αφού τα κάνουμε όλα αυτά, μπορούμε τελικά να τρέξουμε react-native link. Αυτό θα αντιγράψει τις γραμματοσειρές στους σωστούς καταλόγους και θα προσθέσει το απαραίτητο xml στο info.plist στο iOS.
Μόλις τελειώσουμε, μπορούμε να χρησιμοποιήσουμε τη γραμματοσειρά μας απλώς αναφέροντάς την σε οποιοδήποτε φύλλο στυλ με το πλήρες όνομά της. Ας το χρησιμοποιήσουμε στο Text στοιχείο:
import React from ‘react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('Hi!') } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(, document.getElementById('content')); Βήμα 7: Μετακίνηση πραγμάτων γύρω
Το React Native χρησιμοποιεί τους ίδιους κανόνες με το Flexbox για τον καθορισμό στοιχείων. Ας πούμε ότι θέλαμε να τοποθετήσουμε το κουμπί μας στο κάτω μέρος της οθόνης: ας τυλίξουμε το TouchableOpacity με δοχείο View:
Hello {this.props.name}. Please click me. Και τώρα ας ορίσουμε το container στυλ, μαζί με τα άλλα ήδη καθορισμένα στυλ:
container: { flex: 1, justifyContent: 'center', alignItems: 'center' } Ας επικεντρωθούμε στο justifyContent και alignItems. Αυτές οι δύο ιδιότητες ελέγχουν τον τρόπο ευθυγράμμισης του στοιχείου αντίστοιχα κατά μήκος του πρωτεύοντος άξονα και του δευτερεύοντος άξονα του. Από προεπιλογή, ο πρωτεύων άξονας είναι ο κάθετος και ο δευτερεύων άξονας είναι ο οριζόντιος άξονας (μπορείτε να το αλλάξετε ορίζοντας την ιδιότητα flexDirection σε row).
justifyContent έχει έξι πιθανές τιμές που μπορεί να οριστεί σε:
flex-startθα τοποθετήσει όλα τα στοιχεία μαζί, στην αρχή του πλαισίου οριοθέτησης του στοιχείου.flex-endθα τοποθετήσει όλα τα στοιχεία στο τέλος.centerθα τοποθετήσει όλα τα στοιχεία στο κέντρο του πλαισίου οριοθέτησης.space-aroundθα κατανείμει τα συστατικά ομοιόμορφα και θα κεντράρει τα συστατικά στα δημιουργημένα κουτιά οριοθέτησης.space-evenlyθα κατανείμει τα συστατικά ομοιόμορφα, αλλά θα προσπαθήσει να αφήσει ίσο χώρο μεταξύ των στοιχείων και των άλλων ορίων.space-betweenθα απλώσει τα συστατικά διατηρώντας την απόσταση μεταξύ γειτονικών εξαρτημάτων ίση.
alignItems μπορεί να οριστεί σε τέσσερις πιθανές τιμές: flex-start, flex-end, center και stretch. Οι τρεις πρώτοι συμπεριφέρονται όπως για το justifyContent, ενώ stretch θα ρυθμίσει το στοιχείο να καταλαμβάνει όλο τον διαθέσιμο χώρο κατά μήκος του άξονα, έτσι ώστε ο άξονας να είναι πλήρως γεμάτος.
Λοιπόν, αφού θέλουμε το TouchableOpacity για εμφάνιση στο κάτω μέρος και κεντραρισμένο κατά μήκος του οριζόντιου άξονα, μπορούμε να αλλάξουμε το στυλ έτσι:
container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' } Περισσότερες πληροφορίες σχετικά με τις τιμές justifyContent και alignItems μπορεί να βρεθεί εδώ και εδώ .
Βήμα 8: Καταχώριση της αίτησης
Κατά την ανάπτυξη με το React για το πρόγραμμα περιήγησης, πρέπει απλώς να καθορίσουμε ένα σημείο προσάρτησης, να καλέσουμε React.render και να αφήσουμε το React να κάνει τη μαγεία του. Στο React Native, αυτό είναι λίγο διαφορετικό.
import React from ‘react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: ‘Welcome to iOS!', android: ‘Welcome to Android!' })); } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return ; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; }); Πρέπει να εγγράψουμε το στοιχείο για την πλευρά αντικειμενικών γ-πραγμάτων, η οποία γίνεται χρησιμοποιώντας το AppRegistry αντικείμενο. Το όνομα που δίνουμε πρέπει να ταιριάζει με το όνομα στο έργο Xcode.
Η εφαρμογή Hello World React Native έχει σημαντικά περισσότερες γραμμές κώδικα από το αντίστοιχο web, αλλά από την άλλη πλευρά, το React Native διαχωρίζει τις ανησυχίες λίγο περισσότερο, ειδικά επειδή τα στυλ ορίζονται με το στοιχείο.
Ως δευτερεύουσα σημείωση, δεν πρέπει να επαναφέρουμε το clickMe μέθοδος στο this περιβάλλον στο render μέθοδος, ειδικά εάν η εφαρμογή React (Native) γίνεται λίγο πιο περίπλοκη. Επαναφέρει τη μέθοδο σε κάθε κλήση απόδοσης που μπορεί να γίνει αρκετά. Η εναλλακτική λύση είναι να δεσμεύσετε τη μέθοδο μέσα στον κατασκευαστή.
Εκτέλεση της εφαρμογής
Για να εκτελέσουμε την εφαρμογή, πρέπει να αντικαταστήσουμε τα περιεχόμενα του index.ios.js αρχείο με το κομμάτι του κώδικα της μεταμορφωμένης εφαρμογής μας από το τελευταίο βήμα. Τότε πρέπει απλώς να ανοίξουμε το έργο Xcode και να πατήσουμε το μεγάλο κουμπί Run. Αρχικά, ένα τερματικό θα ανοίξει με το διακομιστή React Native και στη συνέχεια θα εμφανιστεί το παράθυρο του προσομοιωτή. Ο διακομιστής React Native δημιουργεί ένα πακέτο, το οποίο στη συνέχεια θα ανακτήσει η εγγενής εφαρμογή. Αυτό επιτρέπει έναν κύκλο ταχείας ανάπτυξης που μοιάζει με ανάπτυξη ιστού, όπου οι αλλαγές θα αντικατοπτρίζονται σχεδόν αμέσως στον προσομοιωτή.
Για Android, αρκεί να προσθέσετε τα ακόλουθα στο package.json αρχείο, κάτω από scripts:
'android-linux': 'react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android' Και μετά εκτελέστε npm run android-linux. Βεβαιωθείτε ότι το android/app/src/main/assets ο κατάλογος υπάρχει εκ των προτέρων.
Αφού εμφανιστεί το τερματικό, η εφαρμογή μας θα εμφανιστεί στη συνέχεια στον προσομοιωτή. Πατώντας CMD + D θα εμφανιστεί ένα μενού ανάπτυξης. Κάνοντας κλικ στο πλαίσιο θα εμφανιστεί μια ειδοποίηση. Η έκδοση iOS:
Και το Android αποδίδει κάτι τέτοιο:
Για διανομή, η εφαρμογή μιας εφαρμογής που δείχνει έναν τοπικό διακομιστή ανάπτυξης δεν θα λειτουργούσε για εμάς. Για αυτόν τον λόγο, μπορούμε να δημιουργήσουμε το πακέτο για χρήση όταν ο διακομιστής React Native δεν εκτελείται με την εντολή react-native bundle. Σε αυτήν την περίπτωση, πρέπει να ενημερώσουμε το didFinishLaunchingWithOptions μέθοδος AppDelegate για να χρησιμοποιήσετε το πακέτο εκτός σύνδεσης.
Αυτό το παράδειγμα εφαρμογής είναι επίσης διαθέσιμο στο Github .
Εργασία με το React Native
Ένα άλλο πράγμα που αξίζει να αναφερθεί είναι ότι δεν χρησιμοποιούμε μόνο τις έννοιες του React και το JavaScript για τις εφαρμογές μας για κινητά, αλλά ορισμένοι από τους προγραμματιστές ροών εργασίας συνηθίζουν να είναι επίσης διαθέσιμοι με το React Native. Όταν προερχόμαστε από την ανάπτυξη ιστού, έχουμε συνηθίσει τα εργαλεία προγραμματιστών, τον έλεγχο στοιχείων και τη ζωντανή επαναφόρτωση.
Ο τρόπος με τον οποίο λειτουργεί το React Native είναι ότι τοποθετεί όλα τα αρχεία JavaScript σε ένα πακέτο. Αυτό το πακέτο εξυπηρετείται είτε από διακομιστή είτε συνδυάζεται με την εφαρμογή. Το πρώτο είναι εξαιρετικά χρήσιμο για ανάπτυξη στον Προσομοιωτή, καθώς μπορούμε να επιτρέψουμε τη ζωντανή επαναφόρτωση. Το μενού προγραμματιστών που παρέχει το React δεν είναι σε καμία περίπτωση τόσο ισχυρό όσο τα Εργαλεία προγραμματιστών Chrome, αλλά παρέχει μια εμπειρία προγραμματιστή που μοιάζει πολύ με τον ιστό με ζωντανή επαναφόρτωση και εντοπισμός σφαλμάτων με τα εργαλεία προγραμματιστή / εντοπισμού σφαλμάτων Chrome (ή Safari).
Οι προγραμματιστές ιστού είναι εξοικειωμένοι με το JSFiddle ή το JSBin, μια διαδικτυακή παιδική χαρά για γρήγορες διαδικτυακές δοκιμές. Υπάρχει ένα παρόμοιο περιβάλλον που μας επιτρέπει να δοκιμάσουμε το React Native σε ένα πρόγραμμα περιήγησης ιστού.
React Native: Μια σταθερή, μοντέρνα επιλογή
Είχα αρχικά προτείνει μια πιο προσεκτική προσέγγιση στο React Native. Σήμερα, είναι μια ώριμη και σταθερή επιλογή.
Ένα από τα μεγάλα πλεονεκτήματα του React είναι ότι δεν επιβάλλει τη ροή εργασίας σας, καθώς αντιπροσωπεύει απλώς το επίπεδο προβολής. Θέλετε να ορίσετε τον δικό σας αγωγό Grunt; Ή θα προτιμούσατε να χρησιμοποιήσετε το Webpack; Και θα χρησιμοποιήσετε το Backbone.js για τις ανάγκες του μοντέλου σας; Ή θέλετε να πάτε με απλά αντικείμενα JavaScript; Οι απαντήσεις σε όλες αυτές τις ερωτήσεις εξαρτώνται απόλυτα, επειδή το React δεν θέτει κανένα περιορισμό σε αυτές τις επιλογές. Όπως το έθεσε ο επίσημος ιστότοπος: «Δεδομένου ότι η React δεν κάνει υποθέσεις για την υπόλοιπη στοίβα τεχνολογίας σας, είναι εύκολο να το δοκιμάσετε σε ένα μικρό χαρακτηριστικό σε ένα υπάρχον έργο.»
Σε κάποιο βαθμό, αυτό ισχύει και για το React Native. Οι προγραμματιστές κινητής τηλεφωνίας μπορούν να ενσωματώσουν το React Native ως μέρος της εφαρμογής τους, να επωφεληθούν από τη ροή εργασιών ανάπτυξης που εμπνέεται από τον Ιστό και να επιλέξουν να ενσωματώσουν τη βιβλιοθήκη σε μεγαλύτερη κλίμακα, εάν χρειάζεται.
Σε κάθε περίπτωση, ένα πράγμα είναι σίγουρο: Το React Native δεν πρόκειται να φύγει . Το Facebook έχει ένα τεράστιο μερίδιο στο ότι έχει πολλές εφαρμογές που υποστηρίζονται από το React Native σε καταστήματα εφαρμογών. Η κοινότητα γύρω από το React Native είναι τεράστια και συνεχίζει να μεγαλώνει.
οι σχεδιαστές διαφημίσεων χρησιμοποιούν την κίνηση για ναΣχετίζεται με: Δημιουργήστε έναν σαρωτή QR: Ένα React Native Camera Tutorial
Κατανόηση των βασικών
Τι είναι το React Native;
Το React Native είναι ένα πλαίσιο για τη δημιουργία εγγενών εφαρμογών iOS και Android χρησιμοποιώντας JavaScript. Βασίζεται στις ίδιες έννοιες με το React, αλλά χρησιμοποιεί εγγενή στοιχεία αντί για στοιχεία ιστού για την απόδοση μιας διεπαφής χρήστη (UI).
Τι είναι το React;
Το React είναι μια βιβλιοθήκη JavaScript front-end, σχεδιασμένη γύρω από την έννοια της χρήσης δηλωτικών προβολών για αποτελεσματικότητα και προβλεψιμότητα.
Τι είναι καλύτερο όταν πρόκειται για React Native εναντίον εγγενών;
Εάν υποστηρίζετε περισσότερες από μία πλατφόρμες, το React Native παρέχει ένα σταθερό πλεονέκτημα όσον αφορά την επαναχρησιμοποίηση του βασικού κώδικα από την εφαρμογή σας. Ίσως χρειαστεί να παρέχετε κάποιον κώδικα για συγκεκριμένη πλατφόρμα, αλλά σίγουρα θα είναι λιγότερο να γράψετε και να συντηρήσετε από ό, τι αν γράψατε μια εγγενή εφαρμογή για κάθε πλατφόρμα.
Τι είναι η εγγενής εφαρμογή;
Μια εγγενής εφαρμογή είναι αυτή που συντάσσεται και λειτουργεί απευθείας στην πλατφόρμα στόχου της. Από προεπιλογή, θα έχει μια «εμφάνιση και αίσθηση» που ταιριάζει με την πλατφόρμα. Το React Native στοχεύει να σας δώσει την ίδια εγγενή εμφάνιση και αίσθηση παρέχοντας παράλληλα επιπλέον φορητότητα και μια οικεία μεθοδολογία.
