React Native-এ react-navigation 5 দিয়ে নেভিগেশন মাষ্টার করুন: একটি ব্যাপক গাইড

React Native-এ নেভিগেশন কথা হলে react-navigation লাইব্রেরিই আমার মস্তিষ্কে আসে।

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

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

এই আর্টিকেলে, আমরা নতুন API-গুলোর মাধ্যমে যাব এবং আমাদের অ্যাপ্লিকেশনে সেগুলো কীভাবে ব্যবহার করতে হয় সেটি দেখব।

মূলত saidhayani.com-এ প্রকাশিত

ইনস্টল করা

react-navigation ইনস্টল করার পদ্ধতি আগের ভার্সনগুলোর (৪.এক্স-র চেয়ে বড়) তুলনায় কিছুটা পরিবর্তন হয়েছে:

// ৪.এক্স ভার্সন yarn add react-navigation 

react-navigation ৫ ইনস্টল করলে এভাবে দেখাবে:

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

এই নতুন পদ্ধতি ডাইনামিক, ব্যবহারে সহজ, এবং react-router API-এর সাথে কিছুটা মিলতুল্য।

ডাইনামিক অপশন

এটি কমিউনিটির দীর্ঘদিনের সবচেয়ে বেশি ডিমান্ড করা ফিচার। পুরোনো পদ্ধতিতে (স্ট্যাটিক) আমার সবসময় সমস্যা হতো এবং নেভিগেশন বিহেভিয়ার ডাইনামিকলি পরিবর্তন করা খুব কঠিন ছিল।

পুরনো পদ্ধতি => ৪.এক্স-র কম

react-navigation-এর পুরনো ভার্সনগুলিতে আমাদের স্ট্যাটিক অপশন ডিফাইন করতে হতো। এবং এটাকে ডাইনামিকলি পরিবর্তন করার কোনো উপায় ছিল না।

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

নতুন পদ্ধতি (ভার্সন ৫)

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

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

এটি বিশেষভাবে ব্যবহারিক যদি আপনি ডাইনামিক থিম ব্যবহার করেন বা আপনার অ্যাপে ডার্ক মোড ইমপ্লিমেন্ট করতে চান।

হুক

এটি আমার প্রিয় ফিচার, এবং এটি টাইম-সেভার। নতুন 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", }} > {/* RouteName এখানে ডিসপ্লে করুন */} <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 ডেভেলপার খুঁজছেন? আমাকে নক করুন।