Style và Layout trong React Native: nền móng để dựng UI mobile

Sau khi đã hiểu component, props, state và hooks, bước tiếp theo rất tự nhiên là học style và layout. Đây là phần quyết định app của bạn trông có “ra mobile” hay không. Một màn hình có logic đúng nhưng spacing lệch, chữ khó đọc, nút khó bấm thì trải nghiệm vẫn chưa ổn.

React Native không dùng CSS file như web truyền thống. Bạn vẫn viết các thuộc tính quen thuộc như backgroundColor, padding, fontSize, nhưng chúng được khai báo bằng object JavaScript và gắn vào component qua prop style.

Style trong React Native khác CSS web thế nào?

Điểm khác dễ thấy nhất là tên thuộc tính dùng camelCase. Ví dụ background-color trên web trở thành backgroundColor, font-size trở thành fontSize. Giá trị số thường được hiểu là density-independent pixels, nên bạn không cần viết px.

import { StyleSheet, Text, View } from 'react-native';

function WelcomeCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>React Native</Text>
      <Text style={styles.subtitle}>Dựng UI mobile bằng component và style.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 22,
    fontWeight: '700',
    color: '#111827',
  },
  subtitle: {
    marginTop: 8,
    fontSize: 15,
    lineHeight: 22,
    color: '#6b7280',
  },
});

View, Text và Image là ba nền móng

View giống một khối container. Bạn dùng nó để nhóm các phần giao diện, tạo nền, padding, border, layout. Text dùng cho chữ. Trong React Native, mọi chữ hiển thị phải nằm trong Text. Image dùng cho ảnh local hoặc ảnh từ URL.

Người mới hay mắc lỗi đặt text trực tiếp trong View, hoặc cố dùng tư duy div/span từ web. Hãy tập nghĩ bằng bộ core component của React Native trước, rồi sau đó mới tạo custom component như ArticleCard, PrimaryButton, ProfileHeader.

Spacing quan trọng hơn bạn nghĩ

UI mobile dễ đọc thường bắt đầu từ spacing tốt. Thay vì đặt margin/padding lung tung, hãy dùng một hệ spacing đơn giản: 4, 8, 12, 16, 24, 32. Khi cả app dùng cùng nhịp spacing, màn hình nhìn gọn hơn và dễ bảo trì hơn.

const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
};

Bạn không cần tạo design system lớn ngay từ đầu. Chỉ cần thống nhất vài con số và dùng lại nhất quán, UI đã bớt rối rất nhiều.

Đừng style tất cả inline

Inline style tiện cho thử nhanh, nhưng nếu dùng quá nhiều, component sẽ dài và khó đọc. Với style dùng nhiều lần hoặc style có nhiều thuộc tính, hãy đưa vào StyleSheet.create.

// Tạm ổn khi thử nhanh
<Text style={{ fontSize: 18, fontWeight: '700' }}>Tiêu đề</Text>

// Dễ bảo trì hơn khi UI lớn lên
<Text style={styles.title}>Tiêu đề</Text>

Layout nên bắt đầu từ nội dung

Trước khi viết style, hãy nhìn màn hình và chia thành các vùng: header, content, action, footer. Sau đó mỗi vùng lại chia thành các component nhỏ hơn. Cách này giúp bạn tránh tình trạng “chỉnh từng pixel” mà không biết cấu trúc tổng thể đang đi đâu.

Lỗi thường gặp

Lỗi đầu tiên là bê nguyên CSS web sang React Native. Lỗi thứ hai là thiếu spacing nhất quán. Lỗi thứ ba là đặt quá nhiều style inline. Lỗi thứ tư là không test trên nhiều kích thước màn hình, khiến UI đẹp ở máy này nhưng vỡ ở máy khác.

Kết luận

Style và layout là nền móng để React Native app nhìn chuyên nghiệp. Hãy bắt đầu bằng core component, StyleSheet, spacing nhất quán và cấu trúc màn hình rõ ràng. Khi nền này ổn, Flexbox sẽ trở thành công cụ rất mạnh thay vì một thứ gây đau đầu.

Nguồn tham khảo: React Native: Style, View, Text, Image.