Bagaimanakah penggayaan (styling) berfungsi dalam React Native?

Question

Accepted Answer

Penggayaan React Native menggunakan **objek JavaScript** (bukan fail CSS) — digunakan melalui prop `style`, selalunya disusun dengan `StyleSheet`. Ia menggunakan sistem susun atur **berasaskan Flexbox**. Konsepnya menyerupai CSS tetapi dengan sintaks JavaScript dan beberapa perbezaan. ## Penggayaan 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 ialah **objek JavaScript** dengan nama sifat **camelCase** (`backgroundColor`, bukan `background-color`); `StyleSheet.create` menyusunnya. Anda juga boleh menghantar objek inline atau tatasusunan style. ## Susun atur Flexbox (lalai) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Perbezaan daripada CSS web ```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 ia penting Memahami penggayaan dalam React Native adalah asas kerana **penggayaan adalah penting untuk membina sebarang UI**, dan pendekatan React Native berbeza daripada CSS web, jadi ia merupakan pengetahuan praktikal yang mesti diketahui. React Native menggayakan UI dengan **objek JavaScript** (melalui prop `style`, disusun dengan `StyleSheet`) dan bukannya fail CSS — dan memahami ini (nama sifat camelCase seperti `backgroundColor`, mentakrif style sebagai objek JS, menggabungkan style dengan tatasusunan) perlu untuk menggayakan sebarang komponen React Native. Memahami **sistem susun atur berasaskan Flexbox** amat penting: React Native menggunakan Flexbox untuk susun atur (seperti CSS Flexbox, dengan flexDirection, justifyContent, alignItems), tetapi dengan perbezaan utama bahawa **flexDirection adalah 'column' secara lalai** (bukan 'row' seperti di web) — satu titik kekeliruan yang biasa. Flexbox ialah mekanisme susun atur utama, jadi memahaminya adalah penting untuk menyusun UI. Memahami **perbezaan daripada CSS web** adalah penting terutamanya bagi pembangun web: objek JS dengan camelCase dan bukannya fail/kelas CSS, nilai berangka tanpa unit, subset sifat CSS (bukan segala-galanya yang dimiliki web), flexbox lalai column, dan tiada cascade/pewarisan seperti CSS (style adalah setiap komponen) — perbezaan ini ialah halangan yang biasa yang dijelaskan dengan memahaminya. Walaupun konsepnya menyerupai CSS (menjadikannya mudah didekati bagi pembangun web), sintaks dan beberapa tingkah laku berbeza, jadi memahami pendekatan khusus React Native adalah perlu. Memandangkan penggayaan adalah penting untuk membina sebarang UI dan pendekatan berasaskan objek JS dan Flexbox React Native (dengan perbezaannya daripada CSS web) ialah cara ia dilakukan, memahami penggayaan dalam React Native adalah pengetahuan praktikal asas yang penting — perlu untuk membina sebarang antara muka React Native, dan penting bagi pembangun web untuk memahami perbezaan daripada CSS, satu kemahiran teras yang digunakan secara berterusan dalam pembangunan UI React Native.