React Native में नेविगेशन में मास्टरी: react-navigation 5 के साथ एक व्यापक गाइड

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

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

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

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

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

इंस्टॉल करना

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

// > 4.x वर्जन
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";

/** ---------स्क्रीन्स----------- */
// 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-router 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 (
        
            
                
                
                
            
        
    )
}

डायनामिक विकल्पों के साथ, मैं प्रमाणीकरण के आधार पर शीर्षक बदल सकता हूं। उदाहरण के लिए यदि उपयोगकर्ता प्रमाणित है, तो मैं स्क्रीन शीर्षक को उपयोगकर्ता के उपयोगकर्ता नाम पर सेट कर सकता हूं, या मैं हेडर के लिए 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 (
        
            {/* यहां RouteName प्रदर्शित करें */}
            {route.name}
        
    )
}

हम 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 डेवलपर ढूंढ रहे हो? मुझसे संपर्क करें।