Styling hoạt động như thế nào trong React Native?

Question

Accepted Answer

Styling trong React Native dùng **object JavaScript** (không phải file CSS) — áp dụng qua prop `style`, thường được tổ chức bằng `StyleSheet`. Nó dùng hệ thống layout **dựa trên Flexbox**. Các khái niệm giống CSS nhưng với cú pháp JavaScript và một số khác biệt. ## Styling với object JavaScript ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — định nghĩa style dưới dạng object JS (thuộc tính camelCase) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (không phải background-color) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` Style là các **object JavaScript** với tên thuộc tính **camelCase** (`backgroundColor`, không phải `background-color`); `StyleSheet.create` tổ chức chúng. Bạn cũng có thể truyền object inline hoặc mảng các style. ## Layout Flexbox (mặc định) ```jsx // React Native dùng FLEXBOX cho layout (như CSS flexbox, nhưng flexDirection mặc định // là 'column', không phải 'row') ``` ## Khác biệt so với CSS web ```text ✓ Object JS, thuộc tính camelCase; không có file/class CSS; giá trị thường là số không đơn vị ✓ FLEXBOX mặc định (flexDirection mặc định 'column', khác với 'row' của web) ✓ Một tập con thuộc tính CSS (không đầy đủ như CSS web); một số hành vi riêng của RN ✓ Không có cascade/inheritance như CSS (style theo từng component); dùng mảng style để kết hợp ``` ## Tại sao điều này quan trọng Hiểu styling trong React Native là nền tảng vì **styling là thiết yếu để xây dựng bất kỳ UI nào**, và cách tiếp cận của React Native khác với CSS web, nên đây là kiến thức thực hành buộc phải biết. React Native style UI bằng **object JavaScript** (qua prop `style`, tổ chức bằng `StyleSheet`) thay vì file CSS — và hiểu điều này (tên thuộc tính camelCase như `backgroundColor`, định nghĩa style dưới dạng object JS, kết hợp style bằng mảng) là cần thiết để style bất kỳ component React Native nào. Hiểu **hệ thống layout dựa trên Flexbox** đặc biệt quan trọng: React Native dùng Flexbox cho layout (như CSS Flexbox, với flexDirection, justifyContent, alignItems), nhưng với khác biệt mấu chốt là **flexDirection mặc định là 'column'** (không phải 'row' như trên web) — một điểm gây nhầm lẫn phổ biến. Flexbox là cơ chế layout chính, nên hiểu nó là thiết yếu để sắp xếp UI. Hiểu **các khác biệt so với CSS web** đặc biệt quan trọng với lập trình viên web: object JS với camelCase thay vì file/class CSS, giá trị số không đơn vị, một tập con thuộc tính CSS (không đầy đủ như web), flexbox mặc định column, và không có cascade/inheritance như CSS (style theo từng component) — những khác biệt này là điểm vấp ngã phổ biến mà việc hiểu sẽ làm rõ. Tuy các khái niệm giống CSS (giúp dễ tiếp cận với lập trình viên web), cú pháp và một số hành vi khác, nên hiểu cách tiếp cận cụ thể của React Native là cần thiết. Vì styling là thiết yếu để xây dựng bất kỳ UI nào và cách tiếp cận dựa trên object JS, Flexbox của React Native (với các khác biệt so với CSS web) là cách thực hiện, hiểu styling trong React Native là kiến thức thực hành thiết yếu, nền tảng — cần thiết để xây dựng bất kỳ giao diện React Native nào, và quan trọng với lập trình viên web để hiểu các khác biệt so với CSS, một kỹ năng cốt lõi dùng liên tục trong phát triển UI React Native.