প্রতিক্রিয়া নেভিগেশন 5 সহ প্রতিক্রিয়া নেটিভ-এ নেভিগেশন কীভাবে পরিচালনা করবেন

প্রতিক্রিয়া-নেভিগেশন হল নেভিগেশন লাইব্রেরি যা আমার মনে আসে যখন আমরা প্রতিক্রিয়া নেটিভ-এ নেভিগেশন সম্পর্কে কথা বলি।

আমি এই লাইব্রেরির একজন বড় ভক্ত এবং এটি সর্বদা প্রথম সমাধান যা আমি প্রতিক্রিয়া নেটিভ-এ নেভিগেশন পরিচালনা করতে ব্যবহার করি। এটি আংশিক কারণ এটির একটি দুর্দান্ত এবং সহজ API রয়েছে এবং এটি খুব কাস্টমাইজযোগ্য৷

আমি এই নিবন্ধটি লিখছি কারণ সংস্করণ 5 সবেমাত্র বিটা থেকে স্থিতিশীল হয়েছে। এটি কিছু বৈশিষ্ট্য পরিবর্তন এবং একটি নতুন API ডিজাইনের সাথে আসে যা রুট ঘোষণা করার একটি সহজ এবং ভিন্ন উপায় প্রদান করে৷

এই নিবন্ধে, আমরা নতুন এপিআইগুলির মাধ্যমে যেতে যাচ্ছি এবং আমাদের অ্যাপ্লিকেশনগুলিতে সেগুলি ব্যবহার করার উপায়গুলি দেখব৷

মূলত 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>
  )
}

এই নতুন উপায়টি গতিশীল, ব্যবহার করা সহজ এবং এটি রিঅ্যাক্ট-রাউটার API-এর মতো।

ডাইনামিক বিকল্প

এটি দীর্ঘকাল ধরে সম্প্রদায়ের দ্বারা সর্বাধিক অনুরোধ করা বৈশিষ্ট্য। আমার সবসময় পুরানো পদ্ধতি (স্ট্যাটিক) নিয়ে সমস্যা ছিল এবং গতিশীলভাবে নেভিগেশন আচরণ পরিবর্তন করা সত্যিই কঠিন ছিল।

পুরানো পদ্ধতি => <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>
  )
}

গতিশীল বিকল্পগুলির সাথে, আমি প্রমাণীকরণের উপর ভিত্তি করে শিরোনাম পরিবর্তন করতে পারি। উদাহরণস্বরূপ, যদি ব্যবহারকারী প্রমাণীকৃত হয়, আমি স্ক্রিন শিরোনামটি ব্যবহারকারীর ব্যবহারকারীর নাম হিসাবে সেট করতে পারি, অথবা আমি শিরোনামের জন্য পটভূমির রঙ পরিবর্তন করতে পারি।

বিশেষ করে আপনি যদি ডায়নামিক থিম ব্যবহার করেন বা আপনি যদি আপনার অ্যাপে ডার্ক মোড প্রয়োগ করতে ইচ্ছুক হন তবে এটি আরও কার্যকর।

হুক

এটি এখন পর্যন্ত আমার প্রিয় বৈশিষ্ট্য, এবং এটি একটি সময়-সংরক্ষণকারী। নতুন API কিছু নির্দিষ্ট ক্রিয়া সম্পাদনের জন্য কিছু কাস্টম হুক চালু করেছে৷

পূর্ববর্তী সংস্করণগুলিতে, উদাহরণস্বরূপ, যদি আমাকে সক্রিয় স্ক্রিনের বর্তমান নাম পেতে হয়, তবে আমাকে নিম্নলিখিতগুলির মতো এটি করার জন্য কিছু সাহায্যকারী তৈরি করতে হয়েছিল৷

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)

প্রতিক্রিয়া-নেভিগেশন অন্যান্য হুকগুলিও অফার করে, উদাহরণস্বরূপ:

• useFocuseEffect :একটি পার্শ্ব প্রতিক্রিয়া হুক যা, যখন স্ক্রিনগুলি লোড করা হয়, তখন ফোকাসযুক্ত স্ক্রিন ফেরত দেয়
• useLinking :ডিপ লিঙ্কিং পরিচালনা করে

আমি অত্যন্ত সুপারিশ করছি যে আপনি সেগুলি পরীক্ষা করে দেখুন৷

র্যাপিং আপ

নতুন রিঅ্যাক্ট-নেভিগেশন এপিআই অবশ্যই স্ট্যাটিক থেকে ডাইনামিক এ চলে যায়। এটি একটি দুর্দান্ত দিক যা আমাদের প্রতিক্রিয়া নেটিভ-এ নেভিগেশন পরিচালনা করার পদ্ধতিকে পুরোপুরি পরিবর্তন করবে। গতিশীল রুটগুলি প্রতিক্রিয়া-নেভিগেশন ব্যবহারকারীদের দ্বারা একটি প্রধান অনুরোধ ছিল এবং এই নতুন উপায়টি আমাদের আরও ভাল ব্যবহারকারী নেভিগেশন অভিজ্ঞতা তৈরি করতে সহায়তা করবে৷

আপনি এখানে প্রতিক্রিয়া নেটিভ সম্পর্কে আরও কন্টেন্ট পেতে পারেন

পড়ার জন্য ধন্যবাদ

• টুইটার
• GitHub
• মেল-লিস্টে যোগ দিন

আপনার প্রোজেক্টের জন্য একজন রিঅ্যাক্ট নেটিভ ডেভেলপার খুঁজছেন? আমাকে আঘাত করুন .