React Native-ல் navigation எப்படி வேலை செய்கிறது? · IT நேர்காணல் பயிற்சி

React Native-ல் navigation எப்படி வேலை செய்கிறது?

React Native-ல் navigation built-in ஆக இல்லை — screen-களுக்கு இடையே நகர்வதற்கான standard solution React Navigation (ஒரு popular library). இது navigators (stack, tabs, drawer) வழங்குகிறது மற்றும் navigation state, history, மற்றும் transitions-ஐ கையாளுகிறது.

React Navigation — the standard 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 example

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 — the standard library

Stack navigation example

Data பரிமாறுதல் மற்றும் back செல்லுதல்

ஏன் இது முக்கியம்