Πώς να χειριστείτε την πλοήγηση στο React Native με την αντίδραση πλοήγησης 5

Το React-navigation είναι η βιβλιοθήκη πλοήγησης που έρχεται στο μυαλό μου όταν μιλάμε για πλοήγηση στο React Native.

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

Γράφω αυτό το άρθρο επειδή η έκδοση 5 μόλις πήγε από το beta σε σταθερό. Έρχεται με ορισμένες αλλαγές χαρακτηριστικών και ένα νέο σχεδιασμό API που παρέχει έναν απλό και διαφορετικό τρόπο δήλωσης διαδρομών.

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

Αρχικά δημοσιεύτηκε στο saidhayani.com

Εγκατάσταση

Ο τρόπος εγκατάστασης της αντίδρασης-πλοήγησης άλλαξε ένα μικρό στοίχημα σε σύγκριση με τις προηγούμενες εκδόσεις (> 4.x):

// > 4.x verions yarn add react-navigation 

Η εγκατάσταση του react-navigation 5 θα έχει την εξής μορφή:

// yarn yarn add @react-navigation/native // npm npm install @react-navigation/native 

Οι πιο πρόσφατες εκδόσεις της αντιδράσεως πλοήγησης χρησιμοποιούν πολλές βιβλιοθήκες τρίτων μερών, όπως το react-native-gesture-handler για κινούμενα σχέδια και χειρισμό μεταβάσεων. Επομένως, πρέπει πάντα να εγκαταστήσετε αυτές τις βιβλιοθήκες.

// yarn yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view // npm npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view 

Δυναμικές οθόνες

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

// @flow import React from "react"; import { createAppContainer, createSwitchNavigator } from "react-navigation"; import { createStackNavigator } from "react-navigation-stack"; /** ---------Screens----------- */ // import LaunchScreen from "../Containers/LaunchScreen"; import HomeScreen from "../Containers/HomeScreen"; import ProfileScreen from "../Containers/ProfileScreen"; import LoginScreen from "../Containers/LoginScreen"; const StackNavigator = createStackNavigator( { initialRouteName: "Home" }, { Home: { screen: HomeScreen }, Login: { screen: LoginScreen, headerMode: "none", }, Profile: { screen: ProfileScreen } ); export default createAppContainer(StackNavigator); 

Το νέο API συνοδεύεται από δυναμικά στοιχεία. και έκανε την πλοήγηση να είναι πιο δυναμική.

Ο νέος τρόπος για να δηλώσετε τις διαδρομές θα μοιάζει με τον ακόλουθο.

import React from "react" import { SafeAreaView, StyleSheet, View, Text, StatusBar } from "react-native" import { NavigationContainer } from "@react-navigation/native" import { createStackNavigator } from "@react-navigation/stack" const App: () => React$Node = () => { return (       ) } const Stack = createStackNavigator() const AppNavigation = () => { return (      ) } const HomeScreen = () => { return (  Home Screen  ) } 

react-navigation5-demo

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

Δυναμικές επιλογές

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

Η παλιά μέθοδος => <4.x

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

 static navigationOptions = { title: "Sign In", header: null, mode: "modal", headerMode: "none" }; 

Η νέα μέθοδος (έκδοση 5)

Το React-navigation έρχεται με μια δυναμική μέθοδο που είναι αρκετά απλή. Μπορούμε να ορίσουμε τις επιλογές σε οποιαδήποτε οθόνη χρησιμοποιώντας μόνο props.

const AppNavigation = ({}) => { let auth = { authenticated: true, user: { email: "[email protected]", username: "John", }, } let ProfileScreenTitle = auth.authenticated ? auth.user.username : "Profile" return (        ) } 

αντίδραση-πλοήγηση-κεφαλίδα

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

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

Γάντζοι

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

In previous versions, for example, if I had to get the currentName of the active screen, I had to create some helpers to do that for me pretty much like the following.

export function getCurrentRouteName(): string | null { const tag = "[getCurrentRouteNameSync] " const navState = getStore().getState().nav const currentRoute = getActiveRouteState(navState) console.log(tag + " currentRoute > ", currentRoute) return currentRoute && currentRoute.routeName ? currentRoute.routeName : null } 

The hooks API helps me avoid all these things and makes it easier for me to access the Navigation API with one single line using a hook.

Now I can easily get the RouteName using useRoute Hook.

import { useRoute } from "@react-navigation/native" const AboutScreen = ({ navigation }) => { const route = useRoute() return (  {/* Display the RouteName here */} {route.name}  ) } 

We can do the same thing with the useNavigationState Hook. It gives us access to the navigation state.

const navigationState = useNavigationState(state => state) let index = navigationState.index let routes = navigationState.routes.length console.log(index) console.log(routes) 

React-navigation offers other hooks as well, for example:

  • useFocuseEffect : a side effect hook that, when the screens are loaded, returns the focused screen
  • useLinking: handles deepLinking

I highly recommend that you check them out.

Wrapping Up

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

Μπορείτε να βρείτε περισσότερο περιεχόμενο σχετικά με το React Native εδώ

Ευχαριστώ για την ανάγνωση

  • Κελάδημα
  • GitHub
  • Εγγραφείτε στη λίστα αλληλογραφίας
Αναζητάτε έναν προγραμματιστή React Native για το έργο σας; Χτύπησέ με .