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>