React Native ਵਿੱਚ navigation ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ?

React Native ਵਿੱਚ navigation ਬਿਲਟ-ਇਨ ਨਹੀਂ ਹੈ — ਸਟੈਂਡਰਡ ਹੱਲ React Navigation (ਇੱਕ ਪ੍ਰਸਿੱਧ ਲਾਇਬ੍ਰੇਰੀ) ਹੈ ਜੋ ਸਕ੍ਰੀਨਾਂ ਦੇ ਵਿੱਚ ਚਲਣ ਲਈ ਹੈ। ਇਹ navigators (stack, tabs, drawer) ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਅਤੇ navigation state, history, ਅਤੇ transitions ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।

React Navigation — ਸਟੈਂਡਰਡ ਲਾਇਬ੍ਰੇਰੀ

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 — ਸਟੈਂਡਰਡ ਲਾਇਬ੍ਰੇਰੀ

Stack navigation ਉਦਾਹਰਣ

ਡੇਟਾ ਪਾਸ ਕਰਨਾ ਅਤੇ ਵਾਪਸ ਜਾਣਾ

ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ