Ένας Πλήρης Οδηγός για την Αντιμετώπιση της Νοηματικής Πλοήγησης

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

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Παράμετροι διέλευσης μεταξύ οθονών

Τα δεδομένα μπορούν να μεταβιβαστούν σε μια οθόνη μέσω του δεύτερου επιχειρήματος σε ή ]. Η οθόνη λήψης προσπελάζει αυτές τις παραμέτρους μέσω .

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Ορισμός προκαθορισμένων τιμών παραμέτρων με χρήση στο συστατικό της οθόνης:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

⁇ επιλογών πλοήγησης

Κάθε οθόνη μπορεί να προσαρμόσει την επικεφαλίδα, το εικονίδιο καρτέλας, την ετικέτα συρταριού κ.λπ., χρησιμοποιώντας το στήριγμα [[LFT:24]] στο [[LFT:25]]] ή το στηρίγματα [[LFT:26]] στον πλοηγό.

Προσαρμογή κεφαλίδας

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

Δυναμικές επιλογές μπορούν να οριστούν χρησιμοποιώντας μια συνάρτηση που λαμβάνει :

options={({ route }) => ({ title: route.params.name })}

Πλοηγητής καρτέλας

Η πλοήγηση καρτέλας είναι κοινή για τις ενότητες εφαρμογών υψηλού επιπέδου. Εγκαταστήστε τον πλοηγό κάτω καρτελών:

npm install @react-navigation/bottom-tabs

Δημιουργήστε έναν πλοηγό καρτέλας και συνδυάστε τον με τη στοίβα σας:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

Μπορείτε να φωλιάσετε τον πλοηγό καρτέλας μέσα σε ένα πλοηγό στοίβας ή αντίστροφα. Προσαρμόστε τα εικονίδια καρτέλας χρησιμοποιώντας το στηρίγματα με .

Πλοηγητής συρταριού

Ένας πλοηγός συρταριού γλιστρά ένα συρτάρι από τα αριστερά, αποκαλύπτοντας αντικείμενα πλοήγησης.

npm install @react-navigation/drawer

Παράδειγμα ρύθμισης:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Χρησιμοποιήστε για να ανοίξετε και να κλείσετε το συρτάρι προγραμματικά.

Φωλιασμένοι ιστιοπλοί

Οι πολύπλοκες εφαρμογές συχνά φωλιάζουν πλοηγοί (π.χ. ένας πλοηγός καρτέλας μέσα σε ένα πλοηγό στοίβας). Αντιδρά η πλοήγηση χειρίζεται με χάρη τη φωλιά. Η διάταξη [[LPT:37]] που παρέχεται σε οποιαδήποτε οθόνη μπορεί να καλέσει μεθόδους σε έναν πλοηγό γονέα, εάν χρειαστεί. Χρησιμοποιήστε [[LFT:38]] για να αποκτήσετε πρόσβαση στις μεθόδους του πλοηγού γονέα.

Παράδειγμα: Μια στοίβα που περιέχει έναν πλοηγό καρτέλας και μια οθόνη ρυθμίσεων:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Σύνδεση και βαθιά σύνδεση

Η αναπαραγωγή πλοήγησης υποστηρίζει βαθιά σύνδεση με τη λαβή URL που ανοίγουν συγκεκριμένες οθόνες. ⁇ της βάσης [[LFT:40]] σε [[LFT:41]]:

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

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

Ροές ταυτοποίησης

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

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

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

Επιδόσεις και Βέλτιστες Πρακτικές

• Χρήση native stack πλοηγό (όχι [[LFT:44]]) για καλύτερες επιδόσεις και εγγενείς μεταβάσεις.
• Ελαχιστοποίηση του αριθμού των οθονών που τοποθετούνται αμέσως. Αντικατάσταση πλοήγησης αποπροσαρτά τις κρυφές οθονές προκαθορισμένα για τους πλοηγούς στοίβας, αλλά για τους πλοηγούς καρτέλας, μπορείτε να ρυθμίσετε τεμπέλικη φόρτωση.
• Περάστε μόνο πρωτόγονα δεδομένα μέσω παραμέτρων για να αποφύγετε θέματα σειριακής σειράς.
• Χρήση ή για εξαρτήματα οθόνης που επαναδημοσιεύονται συχνά.
• Αποφύγετε τους βαρείς υπολογισμούς κατά τη διάρκεια μεταβάσεις πλοήγησης· εργασίες εκφόρτωσης με ].
• Πάντα να χειρίζεστε το γεγονός για μη αποθηκευμένες προτροπές αλλαγών.

Συμπέρασμα

Η React Navigation παρέχει έναν διαισθητικό, προσαρμόσιμο και αποτελεσματικό τρόπο διαχείρισης της πλοήγησης σε εφαρμογές React Native. Με mastering stack, καρτέλα, συρτάρια και φωλιασμένα πλοηγοί, μαζί με τις ροές παραμέτρου που περνούν, βαθιά σύνδεση και ταυτοποίησης, μπορείτε να δημιουργήσετε ισχυρές εμπειρίες κινητών. Για περισσότερες λεπτομέρειες, ανατρέξτε στην [ επίσημη τεκμηρίωση πλοήγησης React[ και τον React Native Navigation Guide[]]. Επίσης, εξετάστε τα άρθρα της κοινότητας ανάγνωσης [ React Navigation best practices] για να βελτιώσετε τις υλοποιήσεις σας.