React Native-এ নেভিগেশন কথা বলতে গেলে আমার মনে যেই লাইব্রেরির নাম আসে তা হল react-navigation।
আমি এই লাইব্রেরির বড় ফ্যান এবং React Native-এ নেভিগেশন হ্যান্ডল করার জন্য এটি সবসময় আমার প্রথম পছন্দ। এর কারণ আংশিকভাবে এর অত্যন্ত সহজ এবং চমৎকার API এবং ব্যাপক কাস্টমাইজেশন যোগ্যতা।
আমি এই নিবন্ধটি লিখছি কারণ সংস্করণ 5 বিটা থেকে স্থিতিশীল হয়ে উঠেছে। এতে কিছু ফিচার পরিবর্তন এবং একটি নতুন API ডিজাইন আসেছে যা রুট ঘোষণার একটি সহজ এবং ভিন্ন পদ্ধতি প্রদান করে।
এই নিবন্ধে, আমরা নতুন API গুলোতে গভীরে যাব এবং সেগুলো আমাদের অ্যাপ্লিকেশনগুলিতে কীভাবে ব্যবহার করতে হয় তা দেখব।
মূলত 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> ) } 
এই নতুন পদ্ধতি ডাইনামিক, ব্যবহারে সহজ, এবং 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 ( <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 কিছু কাস্টম হুক চালু করেছে নির্দিষ্ট ক্রিয়া সম্পাদনের জন্য।
পূর্বের সংস্করণগুলিতে, উদাহরণস্বরূপ, যদি मुझे সক্রিয় স্ক্রিনের 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 আমাকে এই সব ঝামেলা এড়াতে সাহায্য করে এবং একটি একক লাইন দিয়ে হুক ব্যবহার করে Navigation API অ্যাক্সেস করা সহজ করে তোলে।
এখন আমি সহজে useRoute Hook ব্যবহার করে 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 Hook-এ একই কাজ করতে পারি। এটি আমাদের নেভিগেশন স্টেট-এ অ্যাক্সেস দেয়।
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-র বিষয়ে আরও কন্টেন্ট এখানে পাবেন
পড়ার জন্য ধন্যবাদ
- GitHub
- মেইল-লিস্টে যোগ দিন
আপনার প্রজেক্টের জন্য React Native ডেভেলপার খুঁজছেন? আমাকে জানান।
