Πώς να πλοηγηθείτε μεταξύ οθονών σε μια εφαρμογή React Native

Συχνά, κατά τη δημιουργία μιας εφαρμογής React Native, θα τη συνθέσετε από διαφορετικές οθόνες όπως Σύνδεση, Αρχική σελίδα και Πληροφορίες. Στη συνέχεια, θα χρειαστεί να εφαρμόσετε έναν μηχανισμό πλοήγησης, ώστε οι χρήστες σας να μπορούν να πλοηγούνται στην εφαρμογή και να έχουν πρόσβαση στις μεμονωμένες οθόνες της με τη σωστή σειρά.

Ο σκοπός αυτού του σεμιναρίου είναι να σας καθοδηγήσει στη διαδικασία ρύθμισης ενός συστήματος πλοήγησης στην εφαρμογή React Native. Αυτό περιλαμβάνει την εγκατάσταση της βιβλιοθήκης, την προσθήκη των οθονών σας στο πρόγραμμα πλοήγησης στοίβας και τη σύνδεση των οθονών μεταξύ τους μέσα από κάθε στοιχείο σας.

Πριν ξεκινήσεις

Για να ακολουθήσετε αυτό το σεμινάριο στον τοπικό σας υπολογιστή, πρέπει να έχετε εγκαταστήσει τα εξής:

• Node.js έκδοση 10 ή νεότερη έκδοση
• Xcode ή Android Studio (ρυθμίστε να τρέχει τον εξομοιωτή)
• React Native CLI

Για οδηγίες βήμα προς βήμα σχετικά με τον τρόπο ρύθμισης του περιβάλλοντος ανάπτυξης React Native, μπορείτε να διαβάσετε το επίσημο React Native τεκμηρίωση εγκατάστασης.

Πριν ξεκινήσετε να εξετάζετε τον τρόπο εφαρμογής της πλοήγησης στην εφαρμογή React Native, ας καταλάβουμε πώς λειτουργεί ο μηχανισμός πλοήγησης στοίβας στο React Native.

Κατανόηση του τρόπου λειτουργίας της πλοήγησης στοίβας

Φανταστείτε ότι η εφαρμογή React Native είναι μια στοίβα. Αρχικά, σε αυτή τη στοίβα, έχετε Σπίτι, η οποία είναι η πρώτη οθόνη που εμφανίζεται όταν ανοίγετε την εφαρμογή.

Εάν επρόκειτο να πλοηγηθείτε στο Σχετικά με οθόνη από το Σπίτι οθόνη, η εφαρμογή θα ωθούσε Σχετικά με στη στοίβα, ώστε να κάθεται από πάνω Σπίτι. Ομοίως, η εφαρμογή ωθεί κάθε νέα οθόνη στην οποία πλοηγείστε στη στοίβα.

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

Έχοντας μια ξεκάθαρη κατανόηση του μηχανισμού πλοήγησης στοίβας, ήρθε η ώρα να τον ρυθμίσετε σε μια εφαρμογή React Native.

1. Εγκαταστήστε το React Navigation για εγγενείς εφαρμογές

Για να ξεκινήσετε, εγκαταστήστε το Πακέτο πλοήγησης React για εγγενείς εφαρμογές στο έργο React Native, εκτελώντας αυτήν την εντολή σε ένα τερματικό:

npm i @αντιδρώ-πλοήγηση/ντόπιος

Απαιτείται το πακέτο που μόλις εγκαταστήσατε React Native Stack και React Native Screens να τρέξει σωστά. Για να εγκαταστήσετε το RN Stack, εκτελέστε:

npm i @αντιδρώ-πλοήγηση/ντόπιος-σωρός

Για να εγκαταστήσετε το δεύτερο, εκτελέστε αυτό:

npm αντιδρώ-ντόπιος-οθόνες

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

2. Ρυθμίστε την οθόνη στην εφαρμογή React Native σας

Για αυτό το παράδειγμα, θα δημιουργήσουμε μόνο δύο οθόνες — την αρχική οθόνη και την οθόνη σχετικά.

Δημιουργήστε ένα φάκελο με όνομα οθόνες μέσα στον ριζικό κατάλογο της εφαρμογής σας. Στη συνέχεια, δημιουργήστε δύο αρχεία με τα ονόματα HomeScreen.js και AboutScreen.js μέσα στον κατάλογο οθόνες.

Τι να προσθέσετε στο αρχείο HomeScreen.js σας

Ανοίξτε το αρχείο HomeScreen.js και ξεκινήστε εισάγοντας τα ακόλουθα:

εισαγωγή * όπως και Αντιδρώ από'αντιδρώ';
εισαγωγή { Text, View, StyleSheet, TouchableOpacity } από'react-native';
εισαγωγή { useState } από'αντιδρώ'

Στη συνέχεια, δημιουργήστε το λειτουργικό στοιχείο HomeScreen και αποκτήστε πρόσβαση στο αντικείμενο πλοήγησης χρησιμοποιώντας την αποδόμηση αντικειμένων (όπως περιγράφεται Αντιδράστε βέλτιστες πρακτικές), στη συνέχεια επιστρέψτε έναν τίτλο και ένα κουμπί για πλοήγηση στην οθόνη σχετικά:

εξαγωγήΠροκαθορισμένολειτουργίαΑρχική οθόνη({πλοήγηση}) { 
ΕΠΙΣΤΡΟΦΗ ( 
<Θέαστυλ={styles.container}>
<Κείμενοστυλ={styles.paragraph}> Αρχική οθόνη Κείμενο>
 τίτλος="Μετάβαση στο About"
 onPress={() => navigation.navigate('AboutScreen')} 
 /> 
Θέα>
 );
}

Εδώ λέμε στο React Native να πλοηγηθεί Σχετικά με όταν ένας χρήστης πατήσει το κουμπί. Σε αυτήν την περίπτωση, δεν μεταφέρουμε δεδομένα στην οθόνη. Αλλά ας υποθέσουμε ότι θέλετε περάστε δεδομένα στη συνάρτηση; ορίστε πώς θα το κάνατε:

εξαγωγήΠροκαθορισμένολειτουργίαΑρχική οθόνη({πλοήγηση}) { 
συνθ δεδομένα = { όνομα ιστότοπου: "John's Tech" }
ΕΠΙΣΤΡΟΦΗ ( 
<Θέαστυλ={styles.container}>
// Το κείμενο πηγαίνει εδώ 
 τίτλος="Μετάβαση στο About"
 onPress={() => navigation.navigate('AboutScreen', δεδομένα)} 
 /> 
Θέα>
 );
}

Τώρα όταν πατάτε το κουμπί, αυτός ο κωδικός περνά τα δεδομένα στην επόμενη οθόνη, Σχετικά με. μεσα στην AboutScreen.js αρχείο, μπορείτε να αποκτήσετε πρόσβαση στα δεδομένα από τη διαδρομή και να τα εμφανίσετε στη διεπαφή χρήστη.

Τι να προσθέσετε στο αρχείο σας AboutScreen.js

Ανοίξτε το αρχείο AboutScreen.js και ξεκινήστε εισάγοντας τις ακόλουθες εξαρτήσεις:

εισαγωγή * όπως και Αντιδρώ από'αντιδρώ';
εισαγωγή { Κείμενο, Προβολή, Φύλλο στυλ, Κουμπί } από'react-native';

Στη συνέχεια, δημιουργήστε το AboutScreen λειτουργικό στοιχείο που λαμβάνει δεδομένα από το διαδρομή.παραμ ιδιοκτησία και επιστρέφει τα δεδομένα στη διεπαφή χρήστη:

εξαγωγήΠροκαθορισμένολειτουργίαAboutScreen({Διαδρομή}) { 
αφήνω dataObj = route.params
ΕΠΙΣΤΡΟΦΗ ( 
<Θέαστυλ={styles.container}>
<Κείμενοστυλ={styles.paragraph}>
 Αυτό είναι την οθόνη Πληροφορίες του {dataObj.websiteName} 
Κείμενο>
Θέα>
 );
}

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

Το επόμενο βήμα είναι να ρυθμίσουμε το stack navigator με τις δύο οθόνες.

3. Σύνδεση των οθονών με το Stack Navigator

Μέσα στο App.js, ξεκινήστε εισάγοντας τις ακόλουθες εξαρτήσεις:

εισαγωγή * όπως και Αντιδρώ από'αντιδρώ';
εισαγωγή Αρχική οθόνη από'./screens/HomeScreen'
εισαγωγή AboutScreen από"./screens/AboutScreen"
εισαγωγή { NavigationContainer } από"@react-navigation/native"
εισαγωγή { createNativeStackNavigator } από"@react-navigation/native-stack"

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

από @react-navigation/native και createNativeStackNavigator από @react-navigation/native-stack για να μας βοηθήσει να συνδέσουμε τις οθόνες.

Στη συνέχεια, καλέστε createNativeStackNavigator για να ανακτήσετε τη Στοίβα:

συνθ Στοίβα = createNativeStackNavigator()

Αυτό μας επιτρέπει να «στοιβάζουμε» τις οθόνες στις οποίες θέλετε να μεταβείτε στην εφαρμογή σας.

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

εξαγωγήΠροκαθορισμένολειτουργίαApp() { 
ΕΠΙΣΤΡΟΦΗ ( 
<NavigationContainer>
<Σωρός. Πλοηγός>
<Σωρός. Οθόνηόνομα="Αρχική οθόνη"συστατικό = {Αρχική οθόνη} />
<Σωρός. Οθόνηόνομα="Σχετικά με την οθόνη"συστατικό = {AboutScreen} />
Σωρός. Πλοηγός>
NavigationContainer>
 );
}

Αυτός ο κώδικας τοποθετεί την οθόνη HomeScreen στην κορυφή της στοίβας, που σημαίνει ότι η εφαρμογή θα αποδώσει πρώτα το στοιχείο Home όταν ολοκληρωθεί η φόρτωση.

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

Το καλύτερο με τη χρήση του React Navigation για Native είναι ότι είναι τόσο εύκολο στη ρύθμιση και τη χρήση του. Δεν απαιτεί επιπλέον διαμορφώσεις (εκτός από τις απαιτούμενες βιβλιοθήκες που εγκαταστήσατε) και μπορείτε επίσης να συνδεθείτε διαφορετικούς τύπους Paywalls (αν σκοπεύετε να δημιουργήσετε μια εφαρμογή που βασίζεται σε συνδρομή).

Μάθετε περισσότερα για το React Native

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