StyleSheet — nó là gì, tạo kiểu trong React Native

StyleSheet là gì?

StyleSheet — API React Native tích hợp để định nghĩa kiểu component. Không giống như CSS trong phát triển web, RN sử dụng đối tượng JavaScript để mô tả kiểu. StyleSheet.create — phương thức chính — nhận một đối tượng kiểu và trả về một đối tượng với các định danh số.

StyleSheet là một phần của lõi React Native và không yêu cầu cài đặt gói bổ sung. Theo Meta (2026), 95% dự án React Native sử dụng StyleSheet.create cho kiểu tĩnh. Các lựa chọn thay thế: styled-components, Emotion, NativeWind (Tailwind cho RN) — nhưng StyleSheet tích hợp vẫn là tiêu chuẩn cho lõi.

Lịch sử và phát triển

Trong các phiên bản đầu của React Native (2015), kiểu được định nghĩa độc quyền dưới dạng đối tượng inline. StyleSheet.create xuất hiện trong RN 0.4 như một sự tối ưu hóa. Khái niệm được mượn từ CSS: tách kiểu khỏi logic để dễ đọc và hiệu suất. Qua nhiều năm, API đã mở rộng: absoluteFill, hairlineWidth, flatten được thêm vào.

StyleSheet.create so với kiểu inline

Sự khác biệt giữa StyleSheet.create và kiểu inline rất quan trọng cho hiệu suất. Kiểu inline là một đối tượng JavaScript thông thường được tạo mỗi lần render component. StyleSheet.create — một đối tượng được tạo một lần khi tải module và chuyển đổi thành ID số.

Khi truyền kiểu inline, React Native gửi toàn bộ đối tượng qua cầu nối JavaScript-Native mỗi lần. Đối với component có kiểu phức tạp, điều này có nghĩa là hàng chục thuộc tính được truyền mỗi lần render. StyleSheet.create chỉ truyền một định danh số, giảm tải cho cầu nối.

// StyleSheet.create — cách tiếp cận tối ưu
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Kiểu inline — tạo đối tượng mới mỗi lần render
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

Khi nào dùng inline: cho kiểu động phụ thuộc vào trạng thái (đã nhấn, đã chọn, đang hoạt động). Cho kiểu tĩnh, luôn sử dụng StyleSheet.create. Quy tắc: tĩnh → create, động → hàm inline.

Bố cục Flexbox với StyleSheet

Flexbox — cơ chế bố cục duy nhất trong React Native (CSS Grid không được hỗ trợ, float không tồn tại). StyleSheet.create được sử dụng để mô tả container flex và các phần tử con của chúng. Thuộc tính chính: flex (hệ số lấp đầy), flexDirection (row | column), justifyContent, alignItems.

Theo mặc định, flexDirection trong React Native là column (trong CSS — row). Đây là điều đầu tiên cần nhớ khi chuyển từ phát triển web. Tất cả component View đều là container flex theo mặc định. Để căn giữa một phần tử, sử dụng alignItems: 'center' + justifyContent: 'center'.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Quan trọng: trong React Native, tất cả kích thước được chỉ định không có đơn vị (chỉ một số). Phần trăm hoạt động nhưng chỉ cho chiều rộng và chiều cao tương đối so với phần tử cha. margin và padding chấp nhận số. Để đáp ứng, sử dụng flex thay vì phần trăm — đáng tin cậy hơn trên các màn hình khác nhau.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

StyleSheet API bao gồm một số phương thức ngoài create. StyleSheet.flatten hợp nhất một mảng kiểu thành một đối tượng duy nhất — hữu ích cho việc kết hợp và truyền kiểu cho component bên thứ ba. StyleSheet.hairlineWidth trả về chiều rộng đường tối thiểu có thể nhìn thấy trên thiết bị.

StyleSheet.absoluteFill — một kiểu được định nghĩa trước { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Được sử dụng cho lớp phủ, cửa sổ modal và định vị tuyệt đối trên toàn bộ màn hình. StyleSheet.absoluteFillObject — tương tự nhưng dưới dạng đối tượng để mở rộng.

// flatten — hợp nhất kiểu
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — đường tối thiểu
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth hữu ích cho dấu phân cách và đường viền — nó luôn trông như 1 pixel vật lý bất kể mật độ màn hình. Trên màn hình Retina, đây là 0,5 điểm logic, trên màn hình thường — 1 điểm. Không sử dụng hairlineWidth cho các phần tử phải có kích thước cụ thể.

Bố cục đáp ứng với Dimensions API

Dimensions API được sử dụng cùng với StyleSheet cho bố cục đáp ứng trên các kích thước màn hình khác nhau. Dimensions.get('window') trả về chiều rộng và chiều cao của cửa sổ. Để cập nhật phản ứng khi xoay màn hình, sử dụng hook useWindowDimensions từ React Native.

Mặc dù StyleSheet.create không hỗ trợ media query như CSS, bạn có thể tính toán giá trị dựa trên Dimensions bên trong create hoặc sử dụng kiểu động qua một hàm. Đối với điểm ngắt, hãy tạo kiểu riêng cho các phạm vi chiều rộng khác nhau.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions tự động cập nhật khi xoay màn hình và thay đổi kích thước cửa sổ trên máy tính bảng với Split View. Đối với SSR (React Native Web), hãy đảm bảo Dimensions.get được gọi sau khi component được gắn kết để tránh sự khác biệt giữa máy chủ và máy khách.

Tổ chức kiểu trong dự án

Tổ chức StyleSheet trong dự án ảnh hưởng đến khả năng bảo trì và tái sử dụng mã. Ba cách tiếp cận: kiểu cục bộ bên trong component (styles.js bên cạnh component), kiểu toàn cục (theme.js với hằng số màu sắc, khoảng cách, kiểu chữ) và kiểu mô-đun thông qua kết hợp.

Cấu trúc được khuyến nghị: theme.js với hằng số màu sắc, kích thước và kiểu chữ; Component.styles.js bên cạnh mỗi component cho kiểu cụ thể của nó; StyleSheet.flatten để kết hợp kiểu cơ bản và kiểu cụ thể. Đối với dự án lớn, hãy sử dụng Hệ thống Thiết kế với tạo chủ đề.

// theme.js — hằng số toàn cục
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

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

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Lợi ích của tổ chức mô-đun: nguồn duy nhất cho màu sắc và khoảng cách, tái cấu trúc đơn giản hóa (thay đổi primary — tất cả nút cập nhật), tái sử dụng kiểu qua flatten, khả năng đọc và dự đoán mã. Đối với dự án TypeScript, hãy thêm kiểu cho chủ đề qua declare module.