Core Components (View, Text, Image, ScrollView)

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

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

View က layout container ပါ (HTML ရဲ့ <div> နဲ့ တူ) — child component တွေကို group/arrange လုပ်ဖို့ သုံးပါတယ်။ Text က text content ပြသဖို့ တစ်ခုတည်းသော component ပါ (font size/color စတဲ့ text styling ကို Text ထဲမှာပဲ လုပ်ရပါတယ်)။ Image က ပုံပြဖို့သုံးပြီး local file (require) ဒါမှမဟုတ် remote URL (uri) နှစ်မျိုးလက်ခံပါတယ်။ ScrollView က content ကို screen height ထက်ကျော်ရင် scroll လုပ်နိုင်စေတဲ့ container ပါ — content အရေအတွက် များတဲ့အခါ လိုအပ်ပါတယ်။

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

Profile screen တစ်ခု ဆောက်မယ်ဆိုရင် outer View ထဲမှာ Image (profile photo), Text (name, bio), ကျန် content တွေကို ScrollView ထဲမှာ ထားလေ့ရှိပါတယ် — screen size (phone အမျိုးမျိုး) မတူတဲ့အတွက် content ရှည်ရင် ScrollView မပါရင် အောက်ခြေကျန်တဲ့ content ကို မမြင်ရနိုင်ပါဘူး။

View = layout container, Text = text content
Image = local (require) / remote (uri) ပုံပြခြင်း
ScrollView = content ကျော်လွန်ရင် scroll စေခြင်း

Code နမူနာ

javascript

import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';

export default function ProfileScreen() {
  return (
    <ScrollView style={styles.container}>
      <Image
        source={{ uri: 'https://example.com/avatar.png' }}
        style={styles.avatar}
      />
      <Text style={styles.name}>Mya Mya</Text>
      <Text>Software developer, learning React Native.</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  avatar: { width: 100, height: 100, borderRadius: 50 },
  name: { fontSize: 20, fontWeight: 'bold', marginTop: 8 },
});

You should see

Profile screen ပေါ်မှာ avatar image, name, bio ကို scroll လုပ်ကြည့်နိုင်အောင် layout ချနိုင်မည်။

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

View, Text, Image, ScrollView ကို ပေါင်းသုံးပြီး ကိုယ်ပိုင် simple profile screen တစ်ခု တည်ဆောက်ကြည့်ပါ။

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

Image ရဲ့ style ထဲမှာ width/height ကို သတ်မှတ်မထားရင် ပုံလုံးဝ မပေါ်နိုင်ပါဘူး (default size မရှိလို့) — local file ဆိုရင် auto-size ရနိုင်ပေမယ့် remote URI ကတော့ အမြဲ width/height လိုအပ်ပါတယ်။