प्रतिक्रिया नेविगेशन का उपयोग करके मूल नेविगेशन को प्रतिक्रिया करने के लिए एक पूर्ण गाइड

परिचय

React Native जावास्क्रिप्ट और React के साथ मूल मोबाइल ऐप बनाने में सक्षम बनाता है। मोबाइल ऐप डेवलपमेंट का एक महत्वपूर्ण पहलू नेविगेशन है: विभिन्न स्क्रीनों के माध्यम से उपयोगकर्ताओं को मार्गदर्शन और निर्बाध रूप से सुविधाओं का समर्थन करता है। React नेविगेशन React Native अनुप्रयोगों में नेविगेशन को लागू करने के लिए सबसे लोकप्रिय, सामुदायिक संचालित पुस्तकालय है। यह एक घोषणात्मक एपीआई प्रदान करता है, स्टैक, टैब और ड्रॉअर नेविगेटर का समर्थन करता है, और मंच-विशिष्ट इशारों और संक्रमणों को संभालता है। यह गाइड स्थापना से लेकर उन्नत पैटर्न जैसे गहरी लिंकिंग और प्रमाणीकरण प्रवाह तक सब कुछ कवर करता है।

पूर्वापेक्षाएँ और स्थापना

React नेविगेशन का उपयोग करने से पहले, सुनिश्चित करें कि आपके पास एक React Native प्रोजेक्ट शुरू हो रहा है। यदि आप ताजा शुरू कर रहे हैं, तो React Native CLI या Expo का उपयोग करें। React नेविगेशन दोनों के साथ काम करता है।

कोर पैकेज स्थापित करें

एनपीएम या यार्न के माध्यम से आवश्यक पैकेज स्थापित करें। कोर लाइब्रेरी और इसकी मुख्य निर्भरताएं हैं:

npm install @react-navigation/native

फिर सहायक पुस्तकालयों को स्थापित करें जो रीएक्ट नेविगेशन स्क्रीन प्रबंधन और सुरक्षित क्षेत्र हैंडलिंग के लिए निर्भर करता है:

npm install react-native-screens react-native-safe-area-context

यदि आप एक्सपो का उपयोग कर रहे हैं, तो इन पुस्तकालयों को पहले से ही शामिल किया गया है। नंगे प्रतिक्रियात्मक मूल परियोजनाओं के लिए, मूल मॉड्यूल को सही ढंग से लिंक करने के लिए आधिकारिक दस्तावेज़ीकरण में लिंकिंग निर्देशों का पालन करें (React Native 0.60+ के लिए इस तरह के ऑटोलिंकिंग हैंडल)।

एक नेविगेटर स्थापित करें

React नेविगेशन एकाधिक नेविगेटर प्रदान करता है। native stack navigator] अधिकांश उपयोग मामलों के लिए सिफारिश की जाती है:

npm install @react-navigation/native-stack

अन्य नाविकों जैसे bottom टैब और ]ड्रायर अलग से स्थापित हैं:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

कोर अवधारणा

रिएक्ट नेविगेशन तीन मुख्य बिल्डिंग ब्लॉकों के आसपास बनाया गया है:

• NavigationContainer] - सबसे बाहरी रैपर जो नेविगेशन पेड़ और राज्य का प्रबंधन करता है।
• Navigators - घटक जो नेविगेशन पैटर्न (स्टैक, टैब, दराज) को परिभाषित करते हैं।
• Screens – व्यक्तिगत घटक जो ऐप में किसी दृश्य या पृष्ठ का प्रतिनिधित्व करते हैं।

प्रत्येक नेविगेशन सेटअप को में लपेटा जाना चाहिए। यह कंटेनर आमतौर पर ऐप घटक की जड़ पर रखा जाता है।

एक स्टैक नेविगेटर की स्थापना

स्टैक नेविगेटर स्क्रीन के अंतिम-इन-प्रथम स्टैक का प्रबंधन करता है। यह डिफ़ॉल्ट रूप से मूल प्लेटफॉर्म के संक्रमण एनिमेशन और इशारे का उपयोग करता है।

पहले, आवश्यक मॉड्यूल आयात करें:

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

एक स्टैक नेविगेटर उदाहरण बनाएँ:

const Stack = createNativeStackNavigator();

अपने ऐप घटक के अंदर नेविगेटर को परिभाषित करें:

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

प्रत्येक ] के लिए एक prop (Used for the नेविगेशन) और prop (React घटक to render).

स्क्रीन बनाना और नेविगेट करना

स्क्रीन मानक रीएक्ट घटक हैं। उन्हें दो महत्वपूर्ण प्रॉप्स मिलते हैं: और ]। ऑब्जेक्ट स्क्रीन के बीच स्थानांतरित करने के तरीके प्रदान करता है। नीचे एक ठेठ होम स्क्रीन है:

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

जब तक कि यह आगे नेविगेट करने की आवश्यकता नहीं होती तब तक विवरण स्क्रीन को नेविगेशन प्रोप का उपयोग करने की आवश्यकता नहीं होती है।

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

नेविगेशन विधि

React the Internet is available to the ] prop:

• ]navigate (name, params) - एक स्क्रीन पर चल रहा है, एक मौजूदा उदाहरण का उपयोग अगर यह स्टैक में मौजूद है।
• push(name, params)] - हमेशा स्टैक पर एक नई स्क्रीन को धक्का देता है, भले ही उसी स्क्रीन पहले से ही स्टैक में हो।
• goback()] - स्टैक में पिछली स्क्रीन पर नेविगेट करता है।
• स्थापना (नाम, परम) - वर्तमान स्क्रीन को एक नए के साथ बदल देता है, जो इतिहास से वर्तमान को हटा देता है।
• ]reset(state)] – पूरे नेविगेशन स्टेट को एक दिए गए स्टेट ऑब्जेक्ट में रीसेट करता है।

उदाहरण के लिए, विवरण स्क्रीन और पास पैरामीटर के नए उदाहरण को धक्का देना:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

स्क्रीन के बीच पैरामीटर पास करना

डेटा को दूसरे तर्क के माध्यम से ] या के माध्यम से एक स्क्रीन पर भेजा जा सकता है।

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

]]] का उपयोग करके डिफ़ॉल्ट पैरामीटर मान सेट करें:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

नेविगेशन विकल्प को कॉन्फ़िगर करना

प्रत्येक स्क्रीन अपने हेडर, टैब आइकन, दराज लेबल आदि को अनुकूलित कर सकती है, ]] prop on or ] prop on the navigator.

हैडर अनुकूलन

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

गतिशील विकल्प एक फ़ंक्शन का उपयोग करके सेट किया जा सकता है जो प्राप्त करता है :

options={({ route }) => ({ title: route.params.name })}

टैब नेविगेटर

टैब नेविगेशन शीर्ष स्तर के ऐप अनुभागों के लिए आम है। नीचे टैब नेविगेटर स्थापित करें:

npm install @react-navigation/bottom-tabs

एक टैब नेविगेटर बनाएं और इसे अपने स्टैक के साथ जोड़ दें:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

आप एक स्टैक नेविगेटर या इसके विपरीत के अंदर टैब नेविगेटर को घोंसला कर सकते हैं। ] prop का उपयोग करके टैब आइकनों को अनुकूलित करें ]।

दराज नाविक

एक दराज नेविगेटर बाईं ओर से एक दराज स्लाइड करता है, नेविगेशन आइटम का खुलासा करता है। इसे स्थापित करें:

npm install @react-navigation/drawer

उदाहरण सेटअप:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

]] का प्रयोग करके ड्रॉअर प्रोग्राममेटिक रूप से बंद कर दिया।

नेस्टेड नेविगेटर

जटिल ऐप्स अक्सर घोंसले नेविगेटर (जैसे, एक टैब नेविगेटर एक स्टैक नेविगेटर के अंदर)। प्रतिक्रिया नेविगेशन ने घोंसले को सुंदर ढंग से संभाला। [[FLT: 37]] किसी भी स्क्रीन को प्रदान किए गए प्रोप, यदि आवश्यक हो तो एक माता-पिता नेविगेटर पर विधियां बुला सकते हैं। माता-पिता नेविगेटर के तरीकों तक पहुंचने के लिए [[FLT: 38]] का उपयोग करें।

उदाहरण: एक स्टैक जिसमें एक टैब नेविगेटर और एक सेटिंग स्क्रीन शामिल है:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

लिंकिंग और डीप लिंकिंग

React नेविगेशन यूआरएल को संभालने के लिए गहरी लिंकिंग का समर्थन करता है जो विशिष्ट स्क्रीन को खोलता है। ] prop on :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

फिर आने वाले URL को संभालें। यह एक विशिष्ट स्क्रीन से जुड़ी पुश नोटिफिकेशन जैसी सुविधाओं को सक्षम बनाता है।

प्रमाणीकरण प्रवाह

कई एप्लिकेशन को प्रमाणीकरण राज्य के आधार पर सशर्त नेविगेशन की आवश्यकता होती है। एक सामान्य पैटर्न रूट स्तर पर नेविगेटर को स्विच करना है:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

वैकल्पिक रूप से, सशर्त स्क्रीन के साथ एक एकल स्टैक का उपयोग करें। वादा को रखने या तारीख तक रखने से फ़्लिकरिंग से बचें।

प्रदर्शन और सर्वश्रेष्ठ अभ्यास

• बेहतर प्रदर्शन और मूल संक्रमण के लिए native stack navigator (]]]) का उपयोग करें।
• एक ही बार में स्क्रीन की संख्या को कम करें। रिएक्ट नेविगेशन ने स्टैक नेविगेटर के लिए डिफ़ॉल्ट रूप से छिपी हुई स्क्रीन को अनधिकृत किया, लेकिन टैब नेविगेटर के लिए, आप आलसी लोडिंग को कॉन्फ़िगर कर सकते हैं।
• केवल मापदंड के माध्यम से ही सीरियलाइजेशन मुद्दों से बचने के लिए गुजरती है।
• ] का प्रयोग करें या ]] स्क्रीन घटकों के लिए जो अक्सर फिर से प्रस्तुत होते हैं।
• नेविगेशन संक्रमण के दौरान भारी गणना से बचें; के साथ ऑफलोड काम।
• हमेशा ] को संभालना बिना किसी तरह के बदलाव के लिए कार्यक्रम शीघ्रता से।

निष्कर्ष

React नेविगेशन React Native apps में नेविगेशन का प्रबंधन करने के लिए एक सहज, अनुकूलन और प्रदर्शनकारी तरीका प्रदान करता है। स्टैक, टैब, दराज और नेस्टेड नेविगेटर को मास्टर करके, पैरामीटर पासिंग, गहरी लिंकिंग और प्रमाणीकरण प्रवाह के साथ, आप मजबूत मोबाइल अनुभवों का निर्माण कर सकते हैं। आगे विवरण के लिए, ]official React नेविगेशन प्रलेखन और ]] पर सामुदायिक लेख पढ़ने पर विचार करें।