คอมโพเนนต์หลัก (core components) ใน React Native มีอะไรบ้าง?

Question

Accepted Answer

React Native มี **core components** ชุดหนึ่ง — เช่น **View**, **Text**, **Image**, **ScrollView**, **TextInput** — ที่แมปไปยัง native UI element เหล่านี้คือ building block พื้นฐานของ UI ใน React Native ซึ่งใช้แทน HTML element ของเว็บ ## Core components (เทียบกับ HTML ของเว็บ) ```text React Native uses its OWN components (mapping to native views), NOT HTML: VIEW → a container (like a

) — the basic layout building block TEXT → display text (ALL text must be inside a , unlike web) IMAGE → display images (local or remote) TEXTINPUT → text input field (like an ) SCROLLVIEW → a scrollable container FLATLIST → an efficient scrollable LIST (for long lists — renders lazily) TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas) BUTTON → a basic button ``` ## ตัวอย่าง ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (like a div) */} Ann {/* text MUST be in */} {}}> Submit ); } ``` ## ความแตกต่างสำคัญจากเว็บ ```text ✓ Use not

, not

/; ALL text must be in ✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling ✓ Touchables/Pressable for interactions (not onClick on divs) ✓ FlatList for long lists (efficient) — not mapping over everything ``` ## ทำไมจึงสำคัญ การเข้าใจ core components เป็นพื้นฐานสำคัญของการพัฒนาด้วย React Native เพราะ **มันคือ building block ของทุก UI ใน React Native** — คุณนำมาประกอบกันเพื่อสร้างอินเทอร์เฟซ จึงเป็นความรู้พื้นฐานที่ต้องรู้ React Native มี **คอมโพเนนต์ของตัวเอง** ที่แมปไปยัง native view (แทนที่จะเป็น HTML element ของเว็บ) และการเข้าใจคอมโพเนนต์ที่สำคัญ — **View** (คอนเทนเนอร์ คล้าย div), **Text** (สำหรับข้อความทั้งหมด พร้อมกฎสำคัญที่ว่าข้อความทั้งหมดต้องอยู่ภายในคอมโพเนนต์ Text ซึ่งต่างจากเว็บ), **Image**, **TextInput**, **ScrollView**, **FlatList** (สำหรับลิสต์ยาว ๆ อย่างมีประสิทธิภาพ) และ touchables/**Pressable** (สำหรับจัดการการแตะ) — เป็นสิ่งจำเป็นในการสร้าง UI ใด ๆ ใน React Native การเข้าใจ **ความแตกต่างสำคัญจากเว็บ** มีความสำคัญเป็นพิเศษสำหรับนักพัฒนาเว็บ/React ที่กำลังเปลี่ยนมาใช้ React Native: การใช้ View แทน div และ Text แทน p/span (พร้อมกฎข้อความทั้งหมดต้องอยู่ใน Text), การจัดสไตล์ผ่าน style prop แทน CSS class/ไฟล์, การใช้ touchables/Pressable สำหรับการโต้ตอบแทน onClick และการใช้ **FlatList สำหรับลิสต์ยาว ๆ** (ซึ่งเรนเดอร์อย่างมีประสิทธิภาพ/แบบ lazy) แทนการ map ทุกอย่าง — ความแตกต่างเหล่านี้เป็นจุดที่มักสะดุดกัน ซึ่งการเข้าใจ core components ช่วยให้กระจ่างขึ้น คอมโพเนนต์เหล่านี้ประกอบกันได้ (เหมือน React) เพื่อสร้าง UI โดยมี View เป็นคอนเทนเนอร์พื้นฐาน เนื่องจาก core components คือ building block ของทุก UI ใน React Native (คุณใช้มันตลอดเวลาในการสร้างอินเทอร์เฟซ) และการเข้าใจมันรวมถึงความต่างจาก HTML ของเว็บเป็นพื้นฐานสำหรับการสร้างแอป React Native (โดยเฉพาะสำหรับนักพัฒนาเว็บ) ดังนั้นการเข้าใจ core components จึงเป็นความรู้พื้นฐานที่จำเป็นของ React Native — คำศัพท์พื้นฐานของ UI ใน React Native ที่จำเป็นต่อการสร้างอินเทอร์เฟซใด ๆ และต่อการปรับความรู้ React จากเว็บมาสู่โมเดลคอมโพเนนต์แบบ native ซึ่งเป็นทักษะหลักสำหรับการพัฒนา React Native