React Native Academy · पाठ

React Navigation स्थापित और कॉन्फ़िगर करना

React Navigation और उसकी निर्भरताएँ स्थापित करें, ऐप को NavigationContainer में लपेटें और दो स्क्रीन वाला अपना पहला स्टैक नेविगेटर सेट अप करें।

पाठ 1, कुल 4 में से13 चरण

React Navigation स्थापित और कॉन्फ़िगर करना, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

React Navigation क्या है

React Navigation React Native ऐप में नेविगेशन संभालने वाली सबसे लोकप्रिय लाइब्रेरी है। यह नेविगेटर का एक समूह प्रदान करती है — Stack, Tab, Drawer — जिनकी मदद से आप स्क्रीन के बीच जा सकते हैं, डेटा भेज सकते हैं और नेविगेशन इतिहास प्रबंधित कर सकते हैं। React Navigation JavaScript पर आधारित है और Expo तथा बिना अतिरिक्त परत वाले React Native प्रोजेक्ट के साथ सहज रूप से काम करती है।

मुख्य निर्भरताएँ इंस्टॉल करना

React Navigation के लिए इसके मुख्य पैकेज के साथ कुछ मूल निर्भरताएँ भी आवश्यक होती हैं। इंस्टॉल कमांड चलाएँ और फिर मूल Stack तथा आवश्यक जेस्चर/एनीमेशन लाइब्रेरी इंस्टॉल करें।

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

मूल Stack नेविगेटर इंस्टॉल करना

@react-navigation/native-stack का मूल Stack नेविगेटर iOS और Android के मूल प्लेटफ़ॉर्म नेविगेशन घटकों का उपयोग करता है। इससे केवल JS वाले Stack की तुलना में बेहतर प्रदर्शन और अधिक स्वाभाविक अनुभव मिलता है। इसे मुख्य पैकेज के साथ इंस्टॉल करें।

npm install @react-navigation/native-stack

App को NavigationContainer में रखना

React Navigation की हर व्यवस्था में NavigationContainer आपके ऐप का मूल रैपर होना आवश्यक है। यह नेविगेशन ट्री को प्रबंधित करता है, Android के बैक बटन को संभालता है और सभी चाइल्ड घटकों को नेविगेशन संदर्भ उपलब्ध कराता है। अपने पूरे ऐप को App.js के अंदर इसमें रखें।

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

export default function App() {
  return (
    <NavigationContainer>
      {/* navigator goes here */}
    </NavigationContainer>
  );
}

Stack नेविगेटर बनाना

Stack नेविगेटर बनाने के लिए createNativeStackNavigator() का उपयोग करें। यह फ़ंक्शन एक Navigator और एक Screen घटक लौटाता है। अपनी स्क्रीन पंजीकृत करने के लिए Stack.Screen घटकों को Stack.Navigator के अंदर रखें।

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

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name='Home' component={HomeScreen} />
      <Stack.Screen name='Details' component={DetailsScreen} />
    </Stack.Navigator>
  );
}

initialRouteName प्रॉप

डिफ़ॉल्ट रूप से Stack.Navigator में सूचीबद्ध पहली स्क्रीन प्रारंभिक स्क्रीन होती है। Stack.Navigator पर initialRouteName प्रॉप का उपयोग करके आप स्पष्ट रूप से तय कर सकते हैं कि सबसे पहले कौन-सी स्क्रीन दिखाई दे। इसका मान किसी एक Stack.Screen चाइल्ड के name से मेल खाना चाहिए।

<Stack.Navigator initialRouteName='Details'>
  <Stack.Screen name='Home' component={HomeScreen} />
  <Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>

सरल स्क्रीन घटक बनाना

नेविगेटर में पंजीकृत हर स्क्रीन एक सामान्य React घटक होती है। React Navigation हर पंजीकृत स्क्रीन घटक में navigation और route प्रॉप अपने-आप जोड़ता है। इन प्रॉप की मदद से आप नेविगेट कर सकते हैं या रूट पैरामीटर पढ़ सकते हैं।

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

सब कुछ एक साथ जोड़ना

NavigationContainer, Stack नेविगेटर और अपने स्क्रीन घटकों को मिलाने पर दो स्क्रीन वाला काम करने योग्य ऐप तैयार हो जाता है। पंजीकृत पहली स्क्रीन स्टार्टअप पर दिखाई देने वाली स्क्रीन बनती है। React Navigation बैक बटन और नेविगेशन हेडर को अपने-आप संभालता है।

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

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={HomeScreen} />
        <Stack.Screen name='Details' component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

हेडर का शीर्षक कस्टमाइज़ करना

हर Stack.Screen में एक options प्रॉप होता है, जिसकी मदद से आप हेडर कस्टमाइज़ कर सकते हैं। नेविगेशन बार में दिखने वाले डिफ़ॉल्ट स्क्रीन नाम को बदलने के लिए title सेट करें। हेडर को पूरी तरह छिपाने के लिए headerShown: false भी सेट कर सकते हैं।

<Stack.Screen
  name='Home'
  component={HomeScreen}
  options={{ title: 'My Home Page' }}
/>

नेविगेटर में स्क्रीन विकल्प

सभी स्क्रीन पर डिफ़ॉल्ट विकल्प लागू करने के लिए Stack.Navigator पर screenOptions सेट करें। अलग-अलग स्क्रीन के options नेविगेटर के डिफ़ॉल्ट विकल्पों को बदल देते हैं। इससे हर स्क्रीन पर headerStyle या headerTintColor जैसी सामान्य सेटिंग दोहराने की आवश्यकता नहीं रहती।

<Stack.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: '#6200ee' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
  }}
>
  <Stack.Screen name='Home' component={HomeScreen} />
  <Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>

अपनी व्यवस्था जाँचना

npx expo start चलाकर ऐप खोलें। आपको नेविगेशन हेडर के साथ Home स्क्रीन दिखाई देनी चाहिए। iOS पर Details पर जाने के बाद बैक बटन अपने-आप दिखाई देता है। Android पर हार्डवेयर बैक बटन React Navigation द्वारा संभाला जाता है। यदि ऐप क्रैश हो जाए, तो जाँच लें कि react-native-screens और react-native-safe-area-context इंस्टॉल हैं।

त्वरित जाँच

इस पाठ से React Navigation की व्यवस्था संबंधी अवधारणाओं की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: React Navigation के मुख्य और मूल-Stack पैकेज इंस्टॉल करना, अपने ऐप को NavigationContainer में रखना, और Stack.Navigator के अंदर Stack.Screen के साथ स्क्रीन परिभाषित करना। अब हम स्क्रीन के बीच जाने और पैरामीटर भेजने का तरीका समझेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “React Navigation स्थापित और कॉन्फ़िगर करना” पाठ निःशुल्क है?

हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “React Navigation स्थापित और कॉन्फ़िगर करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“React Navigation स्थापित और कॉन्फ़िगर करना” में मैं क्या सीखूँगा?

React Navigation और उसकी निर्भरताएँ स्थापित करें, ऐप को NavigationContainer में लपेटें और दो स्क्रीन वाला अपना पहला स्टैक नेविगेटर सेट अप करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“React Navigation स्थापित और कॉन्फ़िगर करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

React Navigation स्थापित और कॉन्फ़िगर करना
स्क्रीन के बीच जाना और पैरामीटर भेजना
निचला टैब नेविगेटर
ड्रॉअर नेविगेटर और नेस्टेड नेविगेटर

← React Native Academy पर वापस जाएँ