Το Native Routing επανασχεδιάστηκε με το Expo Router

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

Με την κυκλοφορία της βιβλιοθήκης Expo Router, η δρομολόγηση βάσει αρχείων είναι δυνατή με τις εφαρμογές React Native. Το Expo Router θα μπορούσε να είναι ένα καλύτερο σύστημα πλοήγησης για προγραμματιστές React Native που συνεργάζονται με την Expo.

Επανασχεδιασμένη πλοήγηση με το δρομολογητή Expo

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

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

Η πλοήγηση/δρομολόγηση που βασίζεται σε αρχείο δρομολογητή expo είναι ένα απλό σύστημα που λειτουργεί καλά και είναι ήδη εξοικειωμένο μεταξύ των προγραμματιστών JavaScript και των πλαισίων JavaScript όπως Next.js, όπου μπορείτε να ορίσετε διαδρομές.

Εγκατάσταση και ρύθμιση του δρομολογητή Expo

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

Βήμα 1: Εγκαταστήστε το δρομολογητή Expo

Χρησιμοποιήστε αυτήν την εντολή τερματικού για να εκτελέσετε το πρόγραμμα εγκατάστασης expo-router:

npx expo εγκατάσταση expo-router

Θα πρέπει επίσης να βεβαιωθείτε ότι έχετε εγκαταστήσει αυτές τις εξαρτήσεις από ομοτίμους:

• react-native-safe-area-context
• react-native-screens
• σύνδεση της έκθεσης
• expo-status-bar
• react-native-gesture-handler

Εάν λείπουν, μπορείτε να τα εγκαταστήσετε εκτελώντας:

εγκατάσταση npx expo 

Βήμα 2: Ενημερώστε το Σημείο Εισόδου

Δημιούργησε ένα νέο index.js αρχείο για να αντικαταστήσετε το υπάρχον σας App.js σημείο εισόδου και ρυθμίστε το index.js ως σημείο εισόδου της εφαρμογής στο εσωτερικό app.json:

// Ορίστε το index.js ως σημείο εισόδου
{
"κύριος": "index.js"
}
// Εισαγάγετε τα ακόλουθα μέσα στο index.js
εισαγωγή"expo-router/entry";

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

Καθορίστε ένα σχήμα σύνδεσης σε βάθος για την εφαρμογή σας προσθέτοντας ένα σχέδιο ιδιοκτησία σε app.json:

{
"expo": {
"σχέδιο": "myapp"
 }
}

Βήμα 4: Τελική διαμόρφωση

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

Μέσα babel.config.js τροποποιήστε τον υπάρχοντα κώδικα ώστε να μοιάζει με αυτό:

μονάδα μέτρησης.εξαγωγές = λειτουργία (api) {
 api.cache(αληθής);
ΕΠΙΣΤΡΟΦΗ {
 προεπιλογές: ["babel-preset-expo"],
 πρόσθετα: [
απαιτώ.αποφασίζω("expo-router/babel"),
/* */
 ],
 };
};

Τώρα δημιουργήστε ξανά και ξεκινήστε την εφαρμογή σας εκτελώντας:

npx expo --clear

Δημιουργία των διαδρομών της εφαρμογής σας με το Expo Router

Μπορείτε να αρχίσετε να ρυθμίζετε μια ροή πλοήγησης εντός του εφαρμογή ντοσιέ. ο index.js αρχείο είναι το σημείο εκκίνησης σας. Το Expo Router προσθέτει τη διαδρομή κάθε αρχείου που δημιουργείτε μέσα εφαρμογή στο σύστημα δρομολογίων της εφαρμογής με συνδέσμους σε βάθος URL που ταιριάζουν με κάθε σελίδα.

Για παράδειγμα, δημιουργήστε ένα SecondScreen.js αρχείο μέσα στο εφαρμογή κατάλογο και εξαγωγή ενός προεπιλεγμένου στοιχείου:

εισαγωγή { StyleSheet, Text, View } από"react-native";
εισαγωγή Αντιδρώ από"αντιδρώ";
συνθ SecondScreen = () => {
ΕΠΙΣΤΡΟΦΗ (


Δεύτερη οθόνη</Text>
 </View>
 </View>
 );
};
εξαγωγήΠροκαθορισμένο SecondScreen;
συνθ styles = StyleSheet.create({});

Μπορείτε να πλοηγηθείτε σε αυτήν την οθόνη από index.js με την useRouter() μέθοδος:

εισαγωγή { useRouter } από"expo-router";
εξαγωγήΠροκαθορισμένολειτουργίαΣελίδα() {
συνθ πλοήγηση = userRouter();
ΕΠΙΣΤΡΟΦΗ (

Γεια σου Κόσμο</Text>
Αυτή είναι η πρώτη σελίδα του την εφαρμογή σας.</Text>
 τίτλος="Πλοήγηση στη δεύτερη οθόνη"
 onPress={() => {
 navigation.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Εδώ αντιστοιχίζετε τον δρομολογητή στην πλοήγηση και τον χρησιμοποιείτε μέσα στο στοιχείο Κουμπί καλώντας navigation.push("/second"). Το όρισμα στο push είναι η διαδρομή αρχείου της οθόνης στην οποία θέλετε να πλοηγηθείτε.

Μέσα Δεύτερη οθόνη θα μπορούσατε επίσης να πλοηγηθείτε στην οθόνη ευρετηρίου ως εξής:

εισαγωγή { Σύνδεσμος } από"expo-router";
συνθ SecondScreen = () => {
ΕΠΙΣΤΡΟΦΗ (


Δεύτερη οθόνη</Text>
"/" ως παιδί>

Μεταβείτε στο index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Το στοιχείο σύνδεσης παίρνει ένα href prop για να καθορίσει τη διαδρομή. Μέσα στην εφαρμογή, το "/" διαδρομή αντιστοιχεί στο αρχείο καταχώρισης (index.js). Το δεύτερο στήριγμα είναι ως παιδί. Αυτό το στηρίγμα σάς επιτρέπει να αποδώσετε ένα πρώτο θυγατρικό στοιχείο με όλα τα καθορισμένα στηρίγματα αντί για το προεπιλεγμένο στοιχείο Link. Μπορείτε να το χρησιμοποιήσετε για να προσαρμόσετε την εμφάνιση του στοιχείου Link ή για να εφαρμόσετε προσαρμοσμένη λογική δρομολόγησης.

Καθορισμός Δυναμικών Διαδρομών

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

Για να ξεκινήσετε να χρησιμοποιείτε δυναμικές διαδρομές στο Expo Router, πρέπει να ορίσετε τις διαδρομές για τη διαχείριση δυναμικού περιεχομένου. Μπορείτε να χρησιμοποιήσετε παραμετροποιημένες διαδρομές καθορίζοντας σύμβολα κράτησης θέσης στη διαδρομή της διαδρομής. Οι τιμές για αυτά τα σύμβολα κράτησης θέσης θα είναι στη συνέχεια διαθέσιμες στη διαδρομή σας όταν κάποιος πλοηγηθεί σε αυτήν.

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

// app/routes/BlogPost.js
εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { useRouter } από"expo-router";
συνθ BlogPost = ({ Διαδρομή }) => {
συνθ { postId } = route.params;
ΕΠΙΣΤΡΟΦΗ (

Εμφάνιση ανάρτησης ιστολογίου με ID: {postId}</Text>
 </View>
 );
};
εξαγωγήΠροκαθορισμένο Ανάρτηση;

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

Δημιουργία Δυναμικών Διαδρομών

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

Εδώ είναι ένα παράδειγμα:

// app/components/BlogList.js
εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { useNavigation } από"expo-router";
συνθ BlogList = ({ blogPosts }) => {
συνθ πλοήγηση = useNavigation();
συνθ navigateToBlogPost = (postId) => {
 navigation.navigate("Ανάρτηση", { postId });
 };
ΕΠΙΣΤΡΟΦΗ (

 {blogPosts.map((Θέση) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
εξαγωγήΠροκαθορισμένο BlogList;

Σε αυτό το παράδειγμα, επαναλαμβάνετε πάνω από το αναρτήσεις στο blog πίνακας και απόδοση α συστατικό για κάθε ανάρτηση. Όταν πατάτε μια ανάρτηση, το navigateToBlogPost η λειτουργία εκτελείται, περνώντας το postId στη διαδρομή πλοήγησης.

Χειρισμός Δυναμικών Διαδρομών

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

Για παράδειγμα:

// app/routes/BlogPost.js
εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { Route, useFocusEffect } από"expo-router";
συνθ BlogPost = ({ Διαδρομή }) => {
συνθ { postId } = route.params;
 useFocusEffect(() => {
// Λήψη δεδομένων ανάρτησης ιστολογίου με βάση το postId
// Εκτελέστε οποιεσδήποτε άλλες απαραίτητες ενέργειες για εστίαση
 });
ΕΠΙΣΤΡΟΦΗ (

Εμφάνιση ανάρτησης ιστολογίου με ID: {postId}</Text>
 </View>
 );
};
εξαγωγήΠροκαθορισμένο Ανάρτηση;

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

Πλοήγηση με δυναμικές διαδρομές

Για να πλοηγηθείτε σε μια δυναμική διαδρομή, μπορείτε να χρησιμοποιήσετε τις μεθόδους πλοήγησης που παρέχονται από το Expo Router.

Για παράδειγμα, για πλοήγηση στο Ανάρτηση συστατικό με ένα συγκεκριμένο postId, μπορείτε να χρησιμοποιήσετε το πλοήγηση.πλοήγηση μέθοδος:

// app/components/BlogList.js
εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { useNavigation } από"expo-router";
συνθ BlogList = ({ blogPosts }) => {
συνθ πλοήγηση = useNavigation();
συνθ navigateToBlogPost = (postId) => {
 navigation.navigate("Ανάρτηση", { postId });
 };
ΕΠΙΣΤΡΟΦΗ (

 {blogPosts.map((Θέση) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
εξαγωγήΠροκαθορισμένο BlogList;

Όταν πατάτε μια ανάρτηση ιστολογίου, το navigateToBlogPost η λειτουργία θα ενεργοποιηθεί με το postId.

Το Expo Router σάς βοηθά να δομήσετε τις εγγενείς εφαρμογές σας

Το Expo Router παρέχει μια εξαιρετική λύση για τη διαχείριση της πλοήγησης στις εφαρμογές σας React Native. Φανταζόμενος ξανά την εγγενή εμπειρία δρομολόγησης, το Expo Router προσφέρει ευελιξία και ευκολία στη χρήση.

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