Paano gumagana ang styling sa React Native?

Question

Accepted Answer

React Native styling menggunakan **JavaScript objects** (bukan file CSS) — diterapkan melalui prop `style`, sering diorganisir dengan `StyleSheet`. Ini menggunakan sistem layout **berbasis Flexbox**. Konsepnya mirip CSS tetapi dengan sintaks JavaScript dan beberapa perbedaan. ## Styling dengan JavaScript objects ```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', }, }); ``` Style adalah **JavaScript objects** dengan nama properti **camelCase** (`backgroundColor`, bukan `background-color`); `StyleSheet.create` mengorganisirnya. Anda juga dapat melewatkan objek inline atau array styles. ## Flexbox layout (default) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Perbedaan dari web 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 ``` ## Pentingnya hal ini Memahami styling di React Native adalah fundamental karena **styling penting untuk membangun UI apa pun**, dan pendekatan React Native berbeda dari CSS web, jadi ini harus diketahui sebagai pengetahuan praktis. React Native menata UI dengan **JavaScript objects** (melalui prop `style`, diorganisir dengan `StyleSheet`) daripada file CSS — dan memahami hal ini (nama properti camelCase seperti `backgroundColor`, mendefinisikan style sebagai JS objects, menggabungkan style dengan array) diperlukan untuk menata komponen React Native apa pun. Memahami **sistem layout berbasis Flexbox** sangat penting: React Native menggunakan Flexbox untuk layout (seperti CSS Flexbox, dengan flexDirection, justifyContent, alignItems), tetapi dengan perbedaan kunci bahwa **flexDirection default adalah 'column'** (bukan 'row' seperti di web) — titik kebingungan umum. Flexbox adalah mekanisme layout utama, jadi memahaminya penting untuk mengatur UI. Memahami **perbedaan dari web CSS** penting terutama bagi developer web: JS objects dengan camelCase alih-alih file/class CSS, nilai numerik tanpa unit, subset properti CSS (bukan semuanya yang web miliki), flexbox default column, dan tidak ada cascade/inheritance seperti CSS (style per-komponen) — perbedaan ini adalah hambatan umum yang diperjelas dengan pemahaman. Meskipun konsepnya mirip CSS (membuatnya mudah didekati developer web), sintaks dan beberapa perilakunya berbeda, jadi memahami pendekatan spesifik React Native diperlukan. Karena styling penting untuk membangun UI apa pun dan pendekatan React Native berbasis JS-object, berbasis Flexbox (dengan perbedaannya dari CSS web) adalah cara kerjanya, memahami styling di React Native adalah pengetahuan praktis yang penting dan fundamental — diperlukan untuk membangun antarmuka React Native apa pun, dan penting bagi developer web untuk memahami perbedaan dari CSS, keterampilan inti yang digunakan terus-menerus dalam pengembangan UI React Native.