Bagaimana cara styling bekerja di React Native?

Question

Accepted Answer

React Native styling menggunakan **objek JavaScript** (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 objek JavaScript ```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 **objek JavaScript** dengan nama properti **camelCase** (`backgroundColor`, bukan `background-color`); `StyleSheet.create` mengorganisirnya. Anda juga dapat melewatkan objek inline atau array dari style. ## Layout Flexbox (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 ``` ## Mengapa ini penting Memahami styling di React Native adalah fundamental karena **styling sangat penting untuk membangun UI apa pun**, dan pendekatan React Native berbeda dari CSS web, jadi ini adalah pengetahuan praktis yang harus diketahui. React Native menata UI dengan **objek JavaScript** (melalui prop `style`, diorganisir dengan `StyleSheet`) alih-alih file CSS — dan memahami ini (nama properti camelCase seperti `backgroundColor`, mendefinisikan style sebagai objek JS, menggabungkan style dengan array) diperlukan untuk menata gaya 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 ke 'column'** (bukan 'row' seperti di web) — titik kebingungan yang umum. Flexbox adalah mekanisme layout utama, jadi memahaminya sangat penting untuk mengatur UI. Memahami **perbedaan dari web CSS** penting terutama bagi pengembang web: objek JS dengan camelCase alih-alih file/class CSS, nilai numerik tanpa unit, subset properti CSS (tidak semuanya yang dimiliki web), flexbox default column, dan tidak ada cascade/inheritance seperti CSS (style per-komponen) — perbedaan ini adalah hambatan umum yang pemahaman mengklarifikasinya. Meskipun konsepnya mirip CSS (membuatnya dapat didekati oleh pengembang web), sintaks dan beberapa perilakunya berbeda, jadi memahami pendekatan spesifik React Native diperlukan. Karena styling sangat penting untuk membangun UI apa pun dan pendekatan React Native berbasis objek JS, berbasis Flexbox (dengan perbedaannya dari CSS web) adalah cara kerjanya, memahami styling di React Native sangat penting, pengetahuan praktis fundamental — diperlukan untuk membangun antarmuka React Native apa pun, dan penting bagi pengembang web untuk memahami perbedaan dari CSS, keterampilan inti yang digunakan terus-menerus dalam pengembangan UI React Native.