React Native میں navigation کیسے کام کرتی ہے؟

React Native میں navigation built-in نہیں ہے — معیاری حل React Navigation (ایک مقبول library) ہے جو screens کے درمیان منتقلی کے لیے ہے۔ یہ 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 کی مثال

ڈیٹا منتقل کرنا اور واپس جانا

یہ کیوں اہم ہے