रिएक्ट-नेविगेशन के साथ रिएक्ट नेटिव में नेविगेशन को कैसे हैंडल करें 5

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

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

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

इस लेख में, हम नए एपीआई के बारे में जानेंगे और अपने अनुप्रयोगों में उनका उपयोग करने के तरीकों को देखेंगे।

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

इंस्टॉल करना

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

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

प्रतिक्रिया-नेविगेशन 5 स्थापित करना इस तरह दिखेगा:

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

प्रतिक्रिया-नेविगेशन के नवीनतम संस्करण एनीमेशन और हैंडलिंग ट्रांज़िशन के लिए प्रतिक्रिया-मूल-जेस्चर-हैंडलर जैसे कई तृतीय पक्ष पुस्तकालय का उपयोग करते हैं। इसलिए आपको हमेशा उन पुस्तकालयों को स्थापित करने की आवश्यकता है।

// 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

डायनामिक स्क्रीन

नया एपीआई प्रारंभिक मार्गों में गतिशीलता का परिचय देता है। पहले यह सांख्यिकीय रूप से किया जाता था - मूल रूप से, हमें अपने रूट्स को एक कॉन्फ़िग फ़ाइल में परिभाषित करना होता था।

// @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);

नया एपीआई गतिशील घटकों के साथ आता है। और नेविगेशन को और अधिक गतिशील बना दिया।
मार्गों को घोषित करने का नया तरीका बहुत कुछ निम्न जैसा होगा।

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>
  )
}

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

गतिशील विकल्प

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

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

प्रतिक्रिया-नेविगेशन के पुराने संस्करणों के साथ हमें स्थिर विकल्पों को परिभाषित करना था। और इसे गतिशील रूप से बदलने का कोई तरीका नहीं था।

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

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

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

const AppNavigation = ({}) => {
  let auth = {
    authenticated: true,
    user: {
      email: "[email protected]",
      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>
  )
}

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

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

हुक

यह अब तक की मेरी पसंदीदा विशेषता है, और यह एक समय बचाने वाला है। नई एपीआई ने कुछ कार्यों को करने के लिए कुछ कस्टम हुक पेश किए।

पिछले संस्करणों में, उदाहरण के लिए, यदि मुझे सक्रिय स्क्रीन का वर्तमान नाम प्राप्त करना था, तो मुझे ऐसा करने के लिए कुछ सहायक बनाना था जो मेरे लिए निम्न की तरह बहुत कुछ है।

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
}

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

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

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)

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

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

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

रैपिंग अप

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

आप यहां प्रतिक्रियाशील मूल निवासी के बारे में अधिक सामग्री पा सकते हैं

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

• ट्विटर
• गिटहब
• मेल-सूची में शामिल हों

अपने प्रोजेक्ट के लिए रिएक्ट नेटिव डेवलपर खोज रहे हैं? मुझे मारो .