Πώς να δημιουργήσετε μια εφαρμογή ειδήσεων με το React Native

Για την πρώτη μου ανάρτηση στο Medium και ήθελα να μοιραστώ μαζί σας πώς έφτιαξα μια εφαρμογή ειδήσεων με το React Native.

Αρχικά δημοσιεύτηκε στο blog μου.

Απαιτήσεις για την κατασκευή της εφαρμογής:

  • Μια βασική κατανόηση του JavaScriptγλώσσα .
  • Εγκατάσταση: Node.js, αντιδράστε εγγενή χρησιμοποιώντας npm.
  • Χρησιμοποιημένες βιβλιοθήκες: moment, react-native, react-native-στοιχεία.

Εάν δεν είστε εξοικειωμένοι με αυτούς τους πόρους, μην ανησυχείτε - είναι αρκετά εύκολο στη χρήση.

Τα θέματα που θα καλύψουμε στην ανάρτηση είναι:

  • API ειδήσεων
  • Λήψη API
  • Επίπεδη λίστα
  • Τραβήξτε προς τα κάτω για ανανέωση
  • Σύνδεση

Και πολλά άλλα ... ας ξεκινήσουμε!

Μπορείτε να βρείτε το ρεπό του έργου εδώ

API ειδήσεων

Ένα απλό και εύχρηστο API που επιστρέφει μεταδεδομένα JSON για επικεφαλίδες και άρθρα ζωντανά σε όλο τον ιστό αυτήν τη στιγμή. - NewsAPI.org

Πρώτα, πρέπει να προχωρήσετε και να εγγραφείτε στο News Api για να λάβετε δωρεάν apiKey( το κλειδί ελέγχου ταυτότητας ).

Δημιουργήστε ένα νέο έργο React Native και καλέστε το news_app(ή ό, τι θέλετε). Στον κατάλογο έργου, δημιουργήστε έναν νέο φάκελο και καλέστε τον src. Στον src κατάλογο, δημιουργήστε ένα φάκελο με το όνομα components. Ο κατάλογος του έργου σας θα πρέπει να μοιάζει με αυτό:

Στο src φάκελο, δημιουργήστε ένα νέο αρχείο που ονομάζεται news.js. Σε αυτό το αρχείο θα πάρουμε το JSON που περιέχει τους τίτλους από το News API.

news.js

Βεβαιωθείτε ότι αντικαταστήσατε το YOUR_API_KEY_HERE με το δικό σας κλειδί API. Για περισσότερες πληροφορίες σχετικά με το API Ειδήσεων, μεταβείτε στη διεύθυνσηέγγραφα newsapi .

Τώρα δηλώνουμε τη getNews συνάρτηση, η οποία θα πάρει τα άρθρα για εμάς. Εξαγάγετε τη συνάρτηση, ώστε να μπορούμε να την χρησιμοποιήσουμε στο App.jsαρχείο μας .

Εφαρμογή

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

componentDidMountκαλείται αμέσως μετά την τοποθέτηση ενός εξαρτήματος. Μέσα σε αυτό καλούμε τη fetchNewsμέθοδο.

componentDidMount() { this.fetchNews();}

Στην fetchNewsκλήση getNews()που επιστρέφει μια υπόσχεση. Χρησιμοποιούμε λοιπόν τη .then()μέθοδο που παίρνει μια συνάρτηση επανάκλησης και η συνάρτηση επανάκλησης παίρνει ένα όρισμα ( τα άρθρα )

Τώρα αντιστοιχίστε τα άρθρα στην κατάσταση στο όρισμα άρθρων Δακτυλογραφήθηκα μόνο articlesεπειδή είναι μια νέα σύνταξη ES6 που σημαίνει { articles: articles }, και ορίσαμε refreshing ψευδείς για να σταματήσουμε την κινούμενη εικόνα.

fetchNews() { getNews().then( articles => this.setState({ articles, refreshing: false }) ).catch(() => this.setState({ refreshing: false }));}

.catch()καλείται σε απορριφθείσες περιπτώσεις.

handleRefreshΗ μέθοδος πρόκειται να ξεκινήσει το κινούμενο σχέδιο spinner και να καλέσει τη fetchNews()μέθοδο. Περνάμε το () => this.fetchNews (), οπότε καλείται αμέσως μετά την εκχώρηση της κατάστασης.

handleRefresh() { this.setState({ refreshing: true },() => this.fetchNews());}

Μέσα στη μέθοδο απόδοσης, επιστρέφουμε ένα FlatListστοιχείο. Στη συνέχεια περνάμε μερικά στηρίγματα. dataείναι η σειρά άρθρων από this.state. Το renderItemπαίρνει μια συνάρτηση για την απόδοση κάθε στοιχείου στον πίνακα, αλλά στην περίπτωσή μας επιστρέφει μόνο το Articleστοιχείο που εισήγαμε νωρίτερα (θα φτάσουμε σε αυτό). Και περνάμε το αντικείμενο του άρθρου ως στήριγμα για χρήση αργότερα σε αυτό το στοιχείο.

Άρθρο.js

Στο src / components δημιουργήστε ένα νέο αρχείο JavaScript και καλέστε το Article.js

Ας ξεκινήσουμε εγκαθιστώντας δύο απλές βιβλιοθήκες χρησιμοποιώντας το npm:react-native-στοιχεία , κάτι που μας δίνει κάποια προετοιμασίαστοιχεία που θα μπορούσαμε να χρησιμοποιήσουμε, και στιγμή που θα χειριστεί τον χρόνο μας.

Εγκαταστήστε τα χρησιμοποιώντας npm:

npm install --save react-native-elements moment

Στο άρθρο.js:

Υπάρχουν πολλά που συμβαίνουν εδώ. Αρχικά, ξεκινάμε καταστρέφοντας το article στήριγμα και το styles αντικείμενο που ορίζεται κάτω από την τάξη .

Μέσα στη μέθοδο απόδοσης, ορίζουμε τη σταθερά χρόνου για την αποθήκευση του χρόνου που δημοσιεύτηκε το άρθρο. Χρησιμοποιούμε τη βιβλιοθήκη στιγμών για να μετατρέψουμε την ημερομηνία στην ώρα που πέρασε από τότε και περνάμε publishedAtή ώρα από τώρα εάν publishedAtείναι null.

defaultImg εκχωρείται μια διεύθυνση URL εικόνας σε περίπτωση που η διεύθυνση URL της εικόνας του άρθρου είναι μηδενική.

Η μέθοδος απόδοσης επιστρέφει TouchableNativeFeedbackστο χειρισμό όταν ο χρήστης πιέζει την κάρτα. Το περνάμε μερικά στηρίγματα:, το useForgroundοποίο λέει στο στοιχείο να χρησιμοποιεί το πρώτο πλάνο κατά την εμφάνιση του εφέ κυματισμού στην κάρτα και onPress, το οποίο παίρνει μια λειτουργία και το εκτελεί όταν ο χρήστης πιέζει την κάρτα. Περάσαμε το () => Linking.openUrl(url), το οποίο θα ανοίξει απλώς τη διεύθυνση URL στο πλήρες άρθρο όταν πατάμε την κάρτα.

Η κάρτα παίρνει τρία στηρίγματα:, featuredTitle που είναι ένας τίτλος που τοποθετείται πάνω από την εικόνα, featuredTitleStyle για να το στυλ και imageπου είναι η εικόνα του άρθρου από το άρθρο. Διαφορετικά, εάν nullείναι, θα είναι το defaultImg.

.. featuredTitle={title} featuredTitleStyle={featuredTitleStyle} image={ defaultImg }..

Όσο για το στοιχείο κειμένου, θα περιέχει την περιγραφή για το άρθρο.

{description}

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

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

.. {source.name.toUpperCase()} {time}..

Μετά το class, ορίσαμε τα στυλ για αυτά τα στοιχεία.

Τώρα αν εκτελέσουμε την εφαρμογή:

Ορίστε! Ο πηγαίος κώδικας για την εφαρμογή είναι διαθέσιμος στο GitHub: ΕΔΩ, μη διστάσετε.

Ελπίζω να απολαύσατε το άρθρο μου! Εάν έχετε απορίες, μη διστάσετε να σχολιάσετε ή να επικοινωνήσετε μαζί μου στο Twitter και σίγουρα θα βοηθήσω :)

; Αγορά μου έναν καφέ;

Επόμενη ιστορία; Πώς να δημιουργήσετε εγγενείς εφαρμογές για επιτραπέζιους υπολογιστές με JavaScript