React Native Tutorial in Hindi: Exercise on Nested Navigation (#22)

नमस्कार दोस्तों, आज के इस ट्यूटोरियल में हम बात करेंगे React Native में नेस्टेड नेविगेशन के बारे में। इस ट्यूटोरियल के माध्यम से हम एक exercise के साथ कंपोनेंट्स को विभागों में व्यवस्थित करेंगे।

इस exercise के लिए हम एक ToDo ऐप्लिकेशन बनाएंगे जिसमें हम नेस्टेड नेविगेशन का इस्तेमाल करेंगे। इस एप्लिकेशन में हमें दो स्क्रीन्स बनाने होंगे – एक स्क्रीन जिसमें सभी टू-डू आइटम दिखाए जाएंगे और दूसरा स्क्रीन जिसमें हमें एक नया आइटम जोड़ने का विकल्प मिलेगा।

आइटम्स स्क्रीन को होम स्क्रीन कहा जाएगा और न्यू आइटम स्क्रीन को एड स्क्रीन कहा जाएगा।

चलिए शुरुआत करते हैं।

1. सबसे पहले, एप्प की स्वरूपण करें:

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

import HomeScreen from './screens/HomeScreen';
import AddScreen from './screens/AddScreen';

const Stack = createStackNavigator();

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

export default App;

1. अब, HomeScreen को डिज़ाइन करें:

import React from 'react';
import { View, Text } from 'react-native';

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

export default HomeScreen;

1. अब, AddScreen को डिज़ाइन करें:

import React from 'react';
import { View, Text } from 'react-native';

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

export default AddScreen;

1. अब, होम स्क्रीन पर नेविगेशन बटन जोड़ें ताकि हम एड स्क्रीन पर जा सकें:

import React from 'react';
import { View, Text, Button } from 'react-native';

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

export default HomeScreen;

1. अब, ऐड स्क्रीन पर नेविगेशन बटन जोड़ें ताकि हम होम स्क्रीन पर वापस जा सकें:

import React from 'react';
import { View, Text, Button } from 'react-native';

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

export default AddScreen;

इसके बाद, आपका ToDo ऐप्लिकेशन तैयार है। आप इसे अपने एमुलेटर या डिवाइस पर रन करके देख सकते हैं।

उम्मीद है कि यह ट्यूटोरियल आपके लिए मददगार साबित होगा। अगर आपको किसी भी प्रकार की सहायता चाहिए तो कृपया नीचे टिप्पणी बॉक्स में पूछें। धन्यवाद।