Πώς να δημιουργήσετε ένα κινητό σύστημα πλοήγησης με το React Navigation

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

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

Εγκατάσταση της βιβλιοθήκης πλοήγησης React

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

Για να ξεκινήσετε να χρησιμοποιείτε το React Navigation, εγκαταστήστε τη βιβλιοθήκη και τις απαραίτητες εξαρτήσεις:

npm εγκατάσταση @react-navigation/native
npm εγκατάσταση react-native-screens react-native-safe-area-context

Ρύθμιση ενός Navigator

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

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

Θα γράψετε τον κώδικα για να ρυθμίσετε το μοτίβο πλοήγησης που χρησιμοποιείτε μέσα στο έργο σας App.js αρχείο.

Δημιουργώντας ένα Navigator μέσα στο App.js Το αρχείο είναι μια βέλτιστη πρακτική για διάφορους λόγους:

• ο App.js Το αρχείο είναι συνήθως το στοιχείο ανώτατου επιπέδου σε μια εφαρμογή React Native. Ο καθορισμός του Navigator σε αυτό το αρχείο θα διασφαλίσει ότι η ιεραρχία πλοήγησης βρίσκεται στο υψηλότερο επίπεδο του δέντρου συστατικών σας και είναι προσβάσιμη παντού.
• Τοποθέτηση του Navigator στο App.js αρχείο σάς επιτρέπει να έχετε εύκολη πρόσβαση και να μεταβιβάζετε την κατάσταση και τα στηρίγματα σε όλη την εφαρμογή στις οθόνες του πλοηγού.
• React Navigation's NavigationContainer παρέχει το απαραίτητο πλαίσιο για την πλοήγηση και συνήθως βρίσκεται μέσα App.js. Τοποθετώντας το Navigator στο ίδιο αρχείο, μπορείτε εύκολα να το ενσωματώσετε με το NavigationContainer.

Stack Navigator

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

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

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

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { NavigationContainer } από'@react-navigation/native';
εισαγωγή { createStackNavigator } από'@react-navigation/stack';
// Εισαγάγετε τα στοιχεία της οθόνης σας
εισαγωγή Αρχική οθόνη από'./screens/HomeScreen';
εισαγωγή Οθόνη λεπτομερειών από'./screens/DetailsScreen';
συνθ Stack = createStackNavigator();
συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (


"Σπίτι" component={HomeScreen} />
"Λεπτομέριες" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Το παραπάνω μπλοκ κώδικα δημιουργεί ένα στοιχείο Stack Navigator χρησιμοποιώντας createStackNavigator() από τη βιβλιοθήκη πλοήγησης.

Σε αυτό το παράδειγμα, το Stack Navigator έχει δύο οθόνες: Σπίτι και Λεπτομέριες.

Τώρα εγκαταστήστε το Stack Navigator:

npm εγκατάσταση @react-navigation/stack

Μέσα Αρχική οθόνη, μπορείτε να χρησιμοποιήσετε το πλοήγηση αντικείμενο δοκιμής του Stack Navigator:

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

 τίτλος="Πλοήγηση στο .."
 onPress={() => navigation.navigate("DetailScreen")}
 />
 </View>
 );
};
εξαγωγήΠροκαθορισμένο Αρχική οθόνη;
συνθ styles = StyleSheet.create({});

Παρατηρήστε πώς το Stack Navigator δημιουργεί αυτόματα ένα κουμπί βέλους για να χειριστεί την πλοήγηση προς τα πίσω στις προηγούμενες οθόνες.

Tab Navigator

Σε ορισμένες περιπτώσεις, η ύπαρξη ενός συστήματος πλοήγησης εμπρός και πίσω, όπως το Stack Navigator, δεν προσφέρει εξαιρετική εμπειρία. Ένα Tab Navigator είναι πιο κατάλληλο για αυτές τις περιπτώσεις. Εμφανίζει τις οθόνες πλοήγησης που είναι διαθέσιμες εκ των προτέρων στον χρήστη και μπορεί να είναι πιο εύκολο στη χρήση, σαν μια γραμμή πλοήγησης στον ιστό.

Για να ξεκινήσετε, εγκαταστήστε το @react-navigation/bottom-tabs βιβλιοθήκη χρησιμοποιώντας ο διαχειριστής πακέτων NPM.

Με createBottomNavigator(), μπορείτε να δημιουργήσετε μια παρουσία του Tab Navigator όπως κάνατε με το Stack Navigator:

εισαγωγή { createBottomTabNavigator } από'@react-navigation/bottom-tabs';
συνθ Tab = createBottomTabNavigator();

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

εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


 όνομα="Σπίτι"
 component={Αρχική οθόνη}
 επιλογές={{ τίτλος: "Σπίτι" }}
 />
 όνομα="Προφίλ"
 component={ProfileScreen}
 επιλογές={{ τίτλος: "Προφίλ" }}
 />
 όνομα="Λεπτομέριες"
 component={DetailScreen}
 επιλογές={{ τίτλος: "Λεπτομέριες" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Κατά την εκτέλεση της εφαρμογής σας, θα πρέπει να δείτε ένα Tab Navigator με τις καθορισμένες οθόνες σας στο κάτω μέρος.

Θα μπορούσατε να χρησιμοποιήσετε το tabBarΘέση oεπιλογή για να τοποθετήσετε τον πλοηγό στο μπλουζα, σωστά, αριστερά, ή κάτω μέρος (Προκαθορισμένο).

Πλοηγός συρταριών

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

Για να χρησιμοποιήσετε το Drawer Navigator, εγκαταστήστε το μαζί με react-native-gesture-handler και react-native-reanimated:

npm εγκατάσταση @react-navigation/drawer
npm εγκατάσταση react-native-gesture-handler react-native-reanimated

Θα χρειαστεί επίσης να διαμορφώσετε το reanimated στο εσωτερικό σας babel.config.js αρχείο:

μονάδα μέτρησης.εξαγωγές = {
 προεπιλογές: ["babel-preset-expo"],
 πρόσθετα: ["react-native-reanimated/plugin"],
};

Ακολουθεί ένα παράδειγμα για το πώς να ρυθμίσετε ένα Drawer Navigator:

εισαγωγή"react-native-gesture-handler"; // Αυτή η εισαγωγή πρέπει να βρίσκεται στην κορυφή
εισαγωγή { Προβολή, Κείμενο, Κουμπί } από"react-native";
εισαγωγή { createDrawerNavigator } από"@react-navigation/drawer";
εισαγωγή { NavigationContainer } από"@react-navigation/native";
συνθ Drawer = createDrawerNavigator();
συνθ DrawerContent = ({ πλοήγηση }) => {
ΕΠΙΣΤΡΟΦΗ (
καλώδιο: 1, στοίχιση αντικειμένων: "κέντρο", δικαιολογώ Περιεχόμενο: "κέντρο" }}>
μέγεθος γραμματοσειράς: 24, Βάρος γραμματοσειράς: "τολμηρός" }}>
 Καλώς ήρθατε στο Συρτάρι
 </Text>

 Αυτό είναι κάποιο επιπλέον περιεχόμενο που μπορείτε να εμφανίσετε σε το συρτάρι.
 </Text>
"Κλείσιμο συρταριού" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
συνθ Εφαρμογή = () => (

 OriginalRouteName="Σπίτι"
 drawerContent={( στηρίγματα) => <Περιεχόμενο συρταριού {... στηρίγματα} />}
 >
 {/* Οι άλλες οθόνες σας εδώ */}
 </Drawer.Navigator>
 </NavigationContainer>
);
εξαγωγήΠροκαθορισμένο Εφαρμογή?

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

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

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

Εξετάστε αυτές τις βέλτιστες πρακτικές για να αξιοποιήσετε στο έπακρο το Drawer Navigator:

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

Διαβίβαση δεδομένων με στηρίγματα πλοήγησης

Το React Navigation παρέχει έναν ισχυρό μηχανισμό που σας επιτρέπει να μεταφέρετε δεδομένα μέσω των στηρίξεων πλοήγησης.

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

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

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { Προβολή, Κείμενο, Κουμπί } από'react-native';
συνθ Αρχική οθόνη = ({ πλοήγηση }) => {
συνθ handleItemPress = (είδος) => {
 navigation.navigate('DetailScreen', { item });
 };
ΕΠΙΣΤΡΟΦΗ (

Λίστα του Αντικείμενα</Text>
"Στοιχείο 1" onPress={() => handleItemPress('Δεδομένα στοιχείου 1')} />
"Αντικείμενο 2" onPress={() => handleItemPress('Δεδομένα στοιχείου 2')} />
 </View>
 );
};
εξαγωγήΠροκαθορισμένο Αρχική οθόνη;

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

Για να έχετε πρόσβαση στα δεδομένα που έχουν περάσει μέσα στο Οθόνη λεπτομερειών συστατικό, θα χρειαστείτε το πλοήγηση στήριγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { Προβολή, κείμενο } από'react-native';
συνθ DetailScreen = ({ πλοήγηση }) => {
συνθ item = navigation.getParam('είδος', '');
ΕΠΙΣΤΡΟΦΗ (

Οθόνη λεπτομερειών</Text>
{item}</Text>
 </View>
 );
};
εξαγωγήΠροκαθορισμένο DetailScreen;

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

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

Οργάνωση του κωδικού πλοήγησής σας

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

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