Navigation Basics (Stack Navigator)

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

React Navigation က React Native app အတွက် de facto standard navigation library ပါ — Stack Navigator က screen တွေကို 'stack' (တစ်ခုပေါ်တစ်ခု ပုံ) အနေနဲ့ manage လုပ်ပါတယ်, screen A ကနေ B ကို navigate လုပ်ရင် B ကို stack ပေါ်ကနေ push, back button ကနေ pop ပြန်လုပ်ပါတယ် (mobile app ရဲ့ familiar navigation pattern)။ navigation.navigate('ScreenName') နဲ့ screen ကူးပြီး, navigation.goBack() နဲ့ ပြန်သွားနိုင်ပါတယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

npm install @react-navigation/native @react-navigation/native-stack ကို install လုပ်ပြီး NavigationContainer ထဲမှာ Stack.Navigator ကို wrap ရပါတယ် — screen တစ်ခုစီကို Stack.Screen component အဖြစ် register ရပါတယ် (name prop + component prop)။ Screen A ရဲ့ button press ကနေ navigation.navigate('ScreenB') ခေါ်ရင် Screen B ဆီ transition animation နဲ့ ရွှေ့သွားပါလိမ့်မယ်။

• Stack Navigator = screen ကို stack pattern ဖြင့် manage
• navigation.navigate('Name') = screen တစ်ခုကနေ တစ်ခု ကူးခြင်း
• navigation.goBack() = previous screen ပြန်သွားခြင်း

Code နမူနာ

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Inside HomeScreen:
// <Button title="View Detail" onPress={() => navigation.navigate('Detail')} />

Home screen ရဲ့ button ကို press လိုက်ရင် Detail screen ဆီ transition animation ဖြင့် navigate ဖြစ်သွားမည်။