การจัดสไตล์ (styling) ทำงานอย่างไรใน React Native?

Question

Accepted Answer

การจัดสไตล์ใน React Native ใช้ **JavaScript object** (ไม่ใช่ไฟล์ CSS) — นำมาใช้ผ่าน `style` prop และมักจัดระเบียบด้วย `StyleSheet` ใช้ระบบเลย์เอาต์ที่อิงกับ **Flexbox** แนวคิดคล้าย CSS แต่ใช้ไวยากรณ์ JavaScript และมีความแตกต่างอยู่บ้าง ## การจัดสไตล์ด้วย JavaScript object ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — define styles as JS objects (camelCase properties) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (not background-color) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` สไตล์คือ **JavaScript object** ที่มีชื่อพร็อพเพอร์ตีแบบ **camelCase** (`backgroundColor` ไม่ใช่ `background-color`) `StyleSheet.create` ช่วยจัดระเบียบมัน คุณยังสามารถส่ง object แบบ inline หรืออาร์เรย์ของสไตล์ได้ ## เลย์เอาต์ Flexbox (ค่าเริ่มต้น) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## ความแตกต่างจาก CSS ของเว็บ ```text ✓ JS objects, camelCase props; no CSS files/classes; values often unitless numbers ✓ FLEXBOX by default (flexDirection defaults to 'column', unlike web's 'row') ✓ A subset of CSS properties (not everything web CSS has); some RN-specific behavior ✓ No cascade/inheritance like CSS (styles are per-component); use style arrays to combine ``` ## ทำไมจึงสำคัญ การเข้าใจการจัดสไตล์ใน React Native เป็นพื้นฐานสำคัญ เพราะ **การจัดสไตล์เป็นสิ่งจำเป็นต่อการสร้าง UI ใด ๆ** และแนวทางของ React Native ต่างจาก CSS ของเว็บ จึงเป็นความรู้เชิงปฏิบัติที่ต้องรู้ React Native จัดสไตล์ UI ด้วย **JavaScript object** (ผ่าน `style` prop จัดระเบียบด้วย `StyleSheet`) แทนไฟล์ CSS — และการเข้าใจสิ่งนี้ (ชื่อพร็อพเพอร์ตีแบบ camelCase เช่น `backgroundColor`, การนิยามสไตล์เป็น JS object, การรวมสไตล์ด้วยอาร์เรย์) เป็นสิ่งจำเป็นในการจัดสไตล์คอมโพเนนต์ React Native ใด ๆ การเข้าใจ **ระบบเลย์เอาต์ที่อิง Flexbox** มีความสำคัญเป็นพิเศษ: React Native ใช้ Flexbox สำหรับเลย์เอาต์ (เหมือน CSS Flexbox ด้วย flexDirection, justifyContent, alignItems) แต่มีความแตกต่างสำคัญคือ **flexDirection มีค่าเริ่มต้นเป็น 'column'** (ไม่ใช่ 'row' เหมือนบนเว็บ) — เป็นจุดที่มักสับสนกัน Flexbox เป็นกลไกเลย์เอาต์หลัก ดังนั้นการเข้าใจมันจึงจำเป็นต่อการจัดวาง UI การเข้าใจ **ความแตกต่างจาก CSS ของเว็บ** สำคัญโดยเฉพาะสำหรับนักพัฒนาเว็บ: JS object แบบ camelCase แทนไฟล์/คลาส CSS, ค่าตัวเลขที่ไม่มีหน่วย, พร็อพเพอร์ตี CSS เพียงบางส่วน (ไม่ใช่ทุกอย่างที่เว็บมี), Flexbox ที่มีค่าเริ่มต้นเป็น column และไม่มี cascade/inheritance เหมือน CSS (สไตล์เป็นแบบต่อคอมโพเนนต์) — ความแตกต่างเหล่านี้เป็นจุดที่มักสะดุดกันซึ่งการเข้าใจช่วยให้กระจ่างขึ้น แม้แนวคิดจะคล้าย CSS (ทำให้เข้าถึงได้ง่ายสำหรับนักพัฒนาเว็บ) แต่ไวยากรณ์และพฤติกรรมบางอย่างต่างกัน ดังนั้นการเข้าใจแนวทางเฉพาะของ React Native จึงจำเป็น เนื่องจากการจัดสไตล์เป็นสิ่งจำเป็นต่อการสร้าง UI ใด ๆ และแนวทางแบบ JS object ที่อิง Flexbox ของ React Native (พร้อมความแตกต่างจาก CSS ของเว็บ) คือวิธีที่ใช้กัน ดังนั้นการเข้าใจการจัดสไตล์ใน React Native จึงเป็นความรู้เชิงปฏิบัติพื้นฐานที่จำเป็น — จำเป็นต่อการสร้างอินเทอร์เฟซ React Native ใด ๆ และสำคัญสำหรับนักพัฒนาเว็บในการเข้าใจความแตกต่างจาก CSS ซึ่งเป็นทักษะหลักที่ใช้ตลอดเวลาในการพัฒนา UI ด้วย React Native