React Native में नेविगेशन मास्टर करें: react-navigation v5 का उपयोग करके

React Native में नेविगेशन की बात आते ही react-navigation लाइब्रेरी मेरे दिमाग में आती है।

मैं इस लाइब्रेरी का बहुत बड़ा प्रशंसक हूं और React Native में नेविगेशन संभालने के लिए यह हमेशा मेरा पहला समाधान होता है। यह आंशिक रूप से इसलिए है क्योंकि इसका एक शानदार और आसान API है और यह बहुत अनुकूलन योग्य है।

मैं यह लेख लिख रहा हूं क्योंकि संस्करण 5 अभी बीटा से स्थिर हुआ है। यह कुछ फीचर परिवर्तनों और एक नए API डिज़ाइन के साथ आता है जो रूट घोषित करने का एक सरल और अलग तरीका प्रदान करता है।

इस लेख में, हम नए APIs के माध्यम से जाएंगे और हमारे एप्लिकेशन में उनका उपयोग करने के तरीकों को देखेंगे।

मूल रूप से saidhayani.com पर प्रकाशित

इंस्टॉल करना

react-navigation इंस्टॉल करने का तरीका पिछले संस्करणों (>4.x) की तुलना में थोड़ा बदल गया है:

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

React-navigation 5 इंस्टॉल करना इस तरह दिखेगा:

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

React-navigation के नवीनतम संस्करण एनिमेशन और ट्रांज़िशन को संभालने के लिए 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 ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView style={styles.containerStyle}> <AppNavigation /> </SafeAreaView> </> ) } const Stack = createStackNavigator() const AppNavigation = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName="home"> <Stack.Screen name="home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer> ) } const HomeScreen = () => { return ( <View style={styles.containerStyle}> <Text style={styles.title}>Home Screen</Text> </View> ) } 

यह नया तरीका डायनामिक है, उपयोग करने में सरल है, और रिएक्ट-राउटर API की तरह है।

डायनामिक विकल्प

यह लंबे समय से समुदाय द्वारा सबसे अधिक अनुरोधित विशेषता रही है। मुझे हमेशा पुरानी विधि (स्टैटिक) के साथ समस्याएं थीं और नेविगेशन व्यवहार को डायनामिक रूप से बदलना वास्तव में कठिन था।

पुरानी विधी => < 4.x

React-navigation के पुराने संस्करणों के साथ हमें स्टैटिक विकल्प परिभाषित करने पड़ते थे। और इसे डायनामिक रूप से बदलने का कोई तरीका नहीं था।

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

नई विधि (संस्करण 5)

React-navigation एक डायनामिक विधि के साथ आता है जो काफी सरल है। हम केवल props का उपयोग करके किसी भी स्क्रीन पर विकल्प सेट कर सकते हैं।

const AppNavigation = ({}) => { let auth = { authenticated: true, user: { email: "user@mail.com", username: "John", }, } let ProfileScreenTitle = auth.authenticated ? auth.user.username : "Profile" return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Profile" component={ProfileScreen} options={{ title: ProfileScreenTitle, headerTintColor: "#4aa3ba", headerStyle: { backgroundColor: darkModeOn ? "#000" : "#fff", }, }} /> <Stack.Screen name="About" component={AboutScreen} /> </Stack.Navigator> </NavigationContainer> ) } 

डायनामिक विकल्पों के साथ, मैं प्रमाणीकरण के आधार पर शीर्षक बदल सकता हूं। उदाहरण के लिए, यदि उपयोगकर्ता प्रमाणित है, तो मैं स्क्रीन शीर्षक को उपयोगकर्ता के उपयोगकर्ता नाम पर सेट कर सकता हूं, या मैं हेडर के लिए backgroundColor बदल सकता हूं।

यह विशेष रूप से अधिक उपयोगी है यदि आप डायनामिक थीम का उपयोग कर रहे हैं या यदि आप अपने ऐप में डार्क मोड लागू करने के इच्छुक हैं।

हुक्स

यह अब तक मेरी पसंदीदा विशेषता है, और यह एक टाइम-सेवर है। नए API ने कुछ कस्टम हुक पेश किए हैं जिनसे कुछ कार्य किए जा सकते हैं।

पिछले संस्करणों में, उदाहरण के लिए, यदि मुझे सक्रिय स्क्रीन का currentName प्राप्त करना होता, तो मुझे इसके लिए कुछ हेल्पर्स बनाने पड़ते, बहुत कुछ निम्नलिखित की तरह।

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 } 

हुक्स API मुझे इन सभी चीजों से बचने में मदद करता है और एक ही लाइन का उपयोग करके हुक के साथ नेविगेशन API तक पहुंचना आसान बनाता है।

अब मैं useRoute हुक का उपयोग करके आसानी से RouteName प्राप्त कर सकता हूं।

import { useRoute } from "@react-navigation/native" const AboutScreen = ({ navigation }) => { const route = useRoute() return ( <View style={{ justifyContent: "space-around", flex: 1, alignItems: "center", }} > {/* Display the RouteName here */} <Text style={styles.title}>{route.name}</Text> </View> ) } 

हम useNavigationState हुक के साथ भी वही काम कर सकते हैं। यह हमें नेविगेशन स्टेट तक पहुंच देता है।

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

React-navigation अन्य हुक भी प्रदान करता है, उदाहरण के लिए:

• useFocusEffect : एक साइड इफेक्ट हुक जो, जब स्क्रीन लोड होती है, तो फोकस्ड स्क्रीन लौटाता है
• useLinking: डीप लिंकिंग को संभालता है

मैं अत्यधिक अनुशंसा करता हूं कि आप उन्हें देखें।

समापन

नया react-navigation API निश्चित रूप से स्टैटिक से डायनामिक की ओर जाता है। यह एक शानदार दिशा है जो React Native में नेविगेशन को संभालने के तरीके को पूरी तरह से बदल देगी। डायनामिक रूट react-navigation उपयोगकर्ताओं द्वारा एक प्रमुख अनुरोध थे, और यह नया तरीका हमें एक बेहतर उपयोगकर्ता नेविगेशन अनुभव बनाने में मदद करेगा।

आप यहां React Native के बारे में अधिक सामग्री पा सकते हैं

पढ़ने के लिए धन्यवाद

• Twitter
• GitHub
• मेल-सूची में शामिल हों

अपनी परियोजना के लिए React Native डेवलपर खोज रहे हैं? मुझे बताएं।