React Native में navigation कैसे काम करता है? · IT इंटरव्यू अभ्यास

React Native में navigation कैसे काम करता है?

React Native में navigation built-in शामिल नहीं है — screens के बीच जाने के लिए मानक समाधान React Navigation (एक लोकप्रिय library) है। यह navigators (stack, tabs, drawer) प्रदान करता है और navigation state, history, और transitions को संभालता है।

React Navigation — मानक library

text

Navigation isn't built into React Native → use REACT NAVIGATION (the de facto standard):
  → provides NAVIGATORS that structure how users move between screens:
    STACK navigator → push/pop screens (like a stack — forward/back, the most common)
    TAB navigator → bottom/top tabs (switch between sections)
    DRAWER navigator → a side drawer menu
  → handles navigation state, history (back stack), transitions, headers

Stack navigation उदाहरण

jsx

// define screens in a stack navigator
const Stack = createNativeStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// navigate between screens (the navigation prop is passed to screens)
function HomeScreen({ navigation }) {
  return <Button title="Go to Details"
    onPress={() => navigation.navigate('Details', { itemId: 42 })} />;  // navigate + pass params
}

text

→ PARAMS — pass data when navigating: navigation.navigate('Details', { itemId: 42 })
  read in the target: route.params.itemId
→ navigation.goBack() — go back; the stack handles the back button automatically
→ Combine navigators (e.g. tabs containing stacks) for complex app navigation

React Native में navigation कैसे काम करता है?

React Navigation — मानक library

Stack navigation उदाहरण

Data पास करना और वापस जाना

यह क्यों महत्वपूर्ण है

संबंधित प्रश्न