Stack Navigator: এটি কী, React Native-এ স্ট্যাক নেভিগেশন

Stack Navigator কী?

Stack Navigator — React Navigation লাইব্রেরির মৌলিক নেভিগেটরগুলির মধ্যে একটি যা স্ক্রিনের স্ট্যাক মডেল বাস্তবায়ন করে। এটি মোবাইল ব্যবহারকারীদের পরিচিত নেভিগেশন প্রদান করে: নতুন স্ক্রিন খোলার সাথে ডানদিকে স্লাইড অ্যানিমেশন থাকে এবং «পিছনে» বাটন বা সোয়াইপ জেসচার ব্যবহারকারীকে আগের স্ক্রিনে ফিরিয়ে আনে। Stack Navigator iOS এবং Android-এ সমর্থিত, সর্বোচ্চ কর্মক্ষমতার জন্য প্ল্যাটফর্মের নেটিভ উপাদান ব্যবহার করে।

React Navigation হল React Native-এর জন্য সবচেয়ে জনপ্রিয় নেভিগেশন লাইব্রেরি, যা 85% প্রকল্পে ইনস্টল করা (npm ডেটা, 2026 অনুযায়ী)। Stack Navigator এর কোরের অংশ এবং দুটি বাস্তবায়নে উপলব্ধ: createNativeStackNavigator (নেটিভ, প্রস্তাবিত) এবং createStackNavigator (JavaScript, জটিল কাস্টম অ্যানিমেশনের জন্য)। নেটিভ সংস্করণ React Navigation v5-এ আবির্ভূত হয় এবং v6+-এ মানদণ্ডে পরিণত হয়।

Stack Navigator-এর প্রধান সুবিধা — iOS এবং Android ব্যবহারকারীদের পরিচিত স্বাভাবিক আচরণ। iOS-এ, স্ট্যাক দৃশ্যত UINavigationController দ্বারা উপস্থাপিত হয়, Android-এ — FragmentManager দ্বারা স্লাইড অ্যানিমেশন সহ। ডেভেলপারকে ম্যানুয়ালি স্ট্যাক লজিক বাস্তবায়নের প্রয়োজন নেই — নেভিগেটর স্বয়ংক্রিয়ভাবে স্ক্রিন অবস্থা, ব্যাক স্ট্যাক এবং অ্যানিমেশন পরিচালনা করে।

স্ট্যাক নেভিগেশন কীভাবে কাজ করে

স্ট্যাক নেভিগেশন LIFO (Last In, First Out) নীতির উপর ভিত্তি করে। যখন ব্যবহারকারী একটি নতুন স্ক্রিন খোলে, নেভিগেটর এটি স্ট্যাকের শীর্ষে স্থাপন করে। «পিছনে» চাপলে, শীর্ষ স্ক্রিন সরানো হয় এবং ব্যবহারকারী আগের স্ক্রিন দেখে। স্ট্যাক যেকোনো সংখ্যক স্ক্রিন ধারণ করতে পারে — একমাত্র সীমা ডিভাইস মেমোরি।

স্ট্যাকের প্রতিটি স্ক্রিন তার অবস্থা সংরক্ষণ করে। আগের স্ক্রিনে ফিরে গেলে, তার অবস্থা স্বয়ংক্রিয়ভাবে পুনরুদ্ধার হয়। এটি স্ট্যাককে অন্যান্য নেভিগেশন প্রকার (Tab, Drawer) থেকে আলাদা করে, যেখানে স্ক্রিন পুনরায় তৈরি হতে পারে। React Navigation নিজস্ব নেভিগেশন প্রসঙ্গ পদ্ধতির মাধ্যমে অবস্থা পরিচালনা করে।

পিছনে যাওয়ার জন্য সোয়াইপ জেসচার

iOS-এ, Stack Navigator পিছনে যাওয়ার জন্য বাম প্রান্ত থেকে সোয়াইপ জেসচার সমর্থন করে — এটি মানক iOS আচরণ যা ব্যবহারকারীরা আশা করে। Android-এ, জেসচার ডিফল্টরূপে নিষ্ক্রিয়, তবে gestureEnabled অপশনের মাধ্যমে সক্রিয় করা যেতে পারে। Native Stack-এ, জেসচার JavaScript থ্রেডে বিলম্ব ছাড়াই নেটিভভাবে কাজ করে।

Native Stack বনাম JS Stack

React Navigation দুই ধরনের Stack Navigator প্রদান করে: Native Stack (createNativeStackNavigator) এবং JS Stack (createStackNavigator)। প্রধান পার্থক্য — অ্যানিমেশন কার্যকর করার স্থান। Native Stack iOS এবং Android-এর নেটিভ অ্যানিমেশন ড্রাইভার ব্যবহার করে, যেখানে JS Stack React Native-এর JavaScript থ্রেডের মাধ্যমে কাজ করে। তাদের মধ্যে পছন্দ কর্মক্ষমতা এবং কাস্টমাইজেশন প্রয়োজনীয়তার উপর নির্ভর করে।

Native Stack অধিকাংশ প্রকল্পের জন্য প্রস্তাবিত। এটি JS থ্রেড ব্লক না করে মসৃণ 60 FPS অ্যানিমেশন প্রদান করে, iOS-এ সিস্টেম সোয়াইপ-ব্যাক জেসচার সমর্থন করে এবং নেটিভ ট্রানজিশন ব্যবহার করে — iOS-এ slide, Android-এ fade। তবে, Native Stack অ্যানিমেশন কাস্টমাইজেশনে সীমিত: শুধুমাত্র পূর্বনির্ধারিত ট্রানজিশনের সেট উপলব্ধ।

JS Stack cardStyleInterpolator-এর মাধ্যমে অ্যানিমেশনের উপর পূর্ণ নিয়ন্ত্রণ দেয়। ডেভেলপার যেকোনো অ্যানিমেশন তৈরি করতে পারে: স্কেলিং, রোটেশন, প্যারালাক্স, কাস্টম কার্ভ। অসুবিধা — অ্যানিমেশন JS থ্রেডে চলে, যা জটিল ট্রানজিশনের সাথে দুর্বল ডিভাইসে ফ্রেম ড্রপের কারণ হতে পারে। 70% প্রকল্পের জন্য, Native Stack যথেষ্ট।

// Native Stack — প্রস্তাবিত বাস্তবায়ন
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Stack Navigator ইনস্টল ও কনফিগারেশন

Stack Navigator-এর সাথে শুরু করতে, React Navigation এবং এর নির্ভরতাগুলি ইনস্টল করা আবশ্যক। ন্যূনতম সেটে @react-navigation/native, @react-navigation/native-stack এবং react-native-screens অন্তর্ভুক্ত। ইনস্টলের পরে, অ্যাপ্লিকেশনটিকে NavigationContainer-এ মোড়ানো হয় — একটি প্রসঙ্গ যা সমস্ত চাইল্ড উপাদানকে নেভিগেশন অবস্থা প্রদান করে।

# React Navigation নির্ভরতা ইনস্টল করা
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# iOS-এর জন্য — pod ইনস্টল করুন
cd ios && pod install && cd ..

ইনস্টলের পরে, Stack.Navigator RootStackParamList-এ নির্ধারিত নির্দিষ্ট স্ক্রিন সহ তৈরি করা হয়। প্রতিটি স্ক্রিন component prop-এর মাধ্যমে React উপাদানের সাথে যুক্ত হয়। নেভিগেটর রুট বা অন্য নেভিগেটরে (Tab, Drawer) নেস্টেড হতে পারে। কনফিগারেশনের জন্য, screenOptions ব্যবহার করা হয় — সমস্ত স্ক্রিনের জন্য সাধারণ বা প্রতিটির জন্য পৃথক।

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'হোম' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Stack Navigator প্যারামিটার ও কাস্টমাইজেশন

Stack Navigator চেহারা এবং আচরণ কাস্টমাইজ করার জন্য অনেক অপশন প্রদান করে। প্রধান প্যারামিটারগুলি Navigator স্তরে screenOptions বা Screen স্তরে options-এর মাধ্যমে সেট করা হয়। ডেভেলপার হেডার, ট্রানজিশন অ্যানিমেশন, সোয়াইপ জেসচার, কার্ড স্টাইল এবং ব্যাকগ্রাউন্ড ডিমিং কনফিগার করতে পারে। সেটিংসের নমনীয়তা অ্যাপ্লিকেশনের ডিজাইন সিস্টেমের সাথে নেভিগেশন খাপ খাওয়ানোর অনুমতি দেয়।

cardStyleInterpolator-এর মাধ্যমে কাস্টম অ্যানিমেশন

JS Stack-এর জন্য, cardStyleInterpolator স্ক্রিনের মধ্যে ইচ্ছামতো ট্রানজিশন অ্যানিমেশন তৈরি করার অনুমতি দেয়। এটি অনন্য ভিজ্যুয়াল এফেক্ট বাস্তবায়নের জন্য একটি শক্তিশালী টুল: স্কেলিং, রোটেশন, প্যারালাক্স, অনুভূমিক ফ্লিপ। ফাংশনটি বর্তমান অ্যানিমেশন অগ্রগতি মান (current, next) গ্রহণ করে এবং অ্যানিমেটেড উপাদানের জন্য স্টাইল ফেরত দেয়।

TypeScript-এর মাধ্যমে নেভিগেশন টাইপিং

Stack Navigator TypeScript-এর মাধ্যমে পূর্ণ টাইপিং সমর্থন করে। এর জন্য, RootStackParamList নির্ধারণ করা হয় — একটি অবজেক্ট টাইপ যেখানে কীগুলি স্ক্রিন নাম এবং মানগুলি প্যারামিটার টাইপ। টাইপিংয়ের পরে, navigation.navigate এবং route.params অটোকমপ্লিশন এবং টাইপ যাচাই পায়। এটি কম্পাইলেশনের সময় প্যারামিটার পাসিং ত্রুটি দূর করে।

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// টাইপকৃত স্ক্রিন
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>পণ্য {id} — {category}</Text>
      <Button title="কার্টে যোগ করুন"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

উন্নত পরিস্থিতি: মোডাল উইন্ডো ও গ্রুপ

Stack Navigator স্ক্রিন গ্রুপিং এবং মোডাল উইন্ডো সমর্থন করে। গ্রুপ (Screen Group) পুনরাবৃত্তি ছাড়াই একাধিক স্ক্রিনে সাধারণ সেটিংস প্রয়োগ করার অনুমতি দেয়। মোডাল উইন্ডো stack presentation: 'modal'-এর মাধ্যমে বাস্তবায়িত হয় — স্ক্রিনটি ব্যাকগ্রাউন্ড ডিমিং সহ নিচ থেকে খোলে, যেমন iOS-এ সিস্টেম মোডাল। এই অপশন শুধুমাত্র Native Stack-এ উপলব্ধ।

জটিল নেভিগেশনের জন্য, Stack Navigator Tab Navigator বা Drawer Navigator-এর ভিতরে নেস্টেড হতে পারে। উদাহরণস্বরূপ, «হোম» ট্যাবের নিজস্ব স্ক্রিন স্ট্যাক রয়েছে এবং «প্রোফাইল» ট্যাবের নিজস্ব। নেভিগেটরদের এই কম্পোজিশন প্রোডাকশন অ্যাপ্লিকেশনের জন্য মানক পদ্ধতি। প্রতিটি স্ট্যাক বিচ্ছিন্ন: একটি ট্যাবের ভিতরে ব্যাক স্ট্যাক অন্য ট্যাবকে প্রভাবিত করে না।

// Tab Navigator-এ নেস্টেড স্ট্যাক
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// ভাগ করা অপশন সহ স্ক্রিন গ্রুপ
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>