Tab & Drawer Navigation

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

Bottom Tab Navigator က screen major section (Home, Search, Profile) ကို screen အောက်ခြေက tab icon တွေနဲ့ ပြသပြီး, tab တစ်ခုစီက ကိုယ်ပိုင် Stack Navigator ကို ကိုင်ဆောင်နိုင်ပါတယ် (nested navigator pattern)။ Drawer Navigator က side menu (hamburger icon နှိပ်ရင် ဘေးက slide ထွက်လာတဲ့ menu) ကို implement လုပ်ပါတယ် — setting, secondary feature တွေအတွက် သုံးလေ့ရှိပါတယ်။

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

Instagram/Twitter type app တွေမှာ Bottom Tab (Home, Search, Notifications, Profile) ကို အများဆုံးတွေ့ရပါတယ် — user thumb-reach (phone အောက်ခြေ) ကို ထိတွေ့လွယ်လို့ mobile UX pattern အနေနဲ့ standard ဖြစ်ပါတယ်။ Nested navigation (Tab ထဲမှာ Stack ထပ်ထည့်) ကို လုပ်ရင် Home tab ထဲက post တစ်ခု click လိုက်ရင် Home tab's stack ထဲကနေ Detail screen ကို push လုပ်ပြီး, Tab bar ကတော့ ဆက်ရှိနေပါတယ်။

• Bottom Tab Navigator = major section ကို tab icon ဖြင့် ပြသ
• Drawer Navigator = side menu (hamburger icon)
• Nested navigator = Tab ထဲမှာ Stack ထပ်ထည့်နိုင်ခြင်း

Code နမူနာ

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const Tab = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

App ရဲ့ အောက်ခြေမှာ Home/Profile tab icon ၂ ခု ပေါ်လာပြီး tap လိုက်ရင် screen ပြောင်းသွားမည်။