Layout with Flexbox

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

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

React Native မှာ View တိုင်းရဲ့ default flexDirection က 'column' ပါ (web CSS ရဲ့ 'row' default နဲ့ ဆန့်ကျင်ဘက်) — child component တွေက default အနေနဲ့ အပေါ်ကနေအောက် အစီစီ arrange ဖြစ်ပါတယ်။ flexDirection: 'row' ပြောင်းရင် ဘေးချင်းကပ် arrange ဖြစ်ပါတယ်။ justifyContent က main axis ပေါ်မှာ spacing ချုပ်ကိုင်ပြီး (flex-start, center, space-between), alignItems က cross axis ပေါ်မှာ alignment ချုပ်ကိုင်ပါတယ် (flex-start, center, stretch)။

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

Header bar (logo ဘယ်ဘက်, menu icon ညာဘက်) ကို ဆောက်ချင်ရင် flexDirection: 'row', justifyContent: 'space-between' ကို View style ထဲ ထည့်ရုံပါ — child ၂ ခုက automatic ကြားခြားထွက်သွားပါလိမ့်မယ်။ flex: 1 ကို child component ရဲ့ style ထဲ ထည့်ရင် available space ကို ယူပါတယ် — screen size အမျိုးမျိုးမှာ responsive ဖြစ်စေချင်ရင် fixed width/height အစား flex ကို သုံးတာက ပိုကောင်းပါတယ်။

React Native default flexDirection = column (web ရဲ့ row နဲ့ ဆန့်ကျင်)
justifyContent = main axis spacing, alignItems = cross axis alignment
flex: 1 = available space ယူခြင်း (responsive layout)

Code နမူနာ

javascript

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
  },
  content: {
    flex: 1,           // remaining space ကို ယူ
    justifyContent: 'center',
    alignItems: 'center',
  },
});

You should see

Header bar တစ်ခုကို flexDirection: row နဲ့ ဆောက်ပြီး logo/icon ကို ဘေးချင်းကပ် arrange လုပ်နိုင်မည်။

၅ မိနစ် စမ်းကြည့်

flexDirection: 'row' ပါတဲ့ View တစ်ခုထဲမှာ box ၃ ခု ထည့်ပြီး justifyContent ကို 'flex-start', 'center', 'space-between' သုံးမျိုးနဲ့ စမ်းကြည့်ပါ။

သတိလေးတစ်ချက်

flex: 1 ကို parent container မှာ height သတ်မှတ်မထားရင် (root View က flex: 1 ရှိမှ) အလုပ်မဖြစ်နိုင်ပါဘူး — parent-child flex chain ကို သတိထားပါ။