Bài 4 : Styles

Tùy biến giao diện với Styles

Như vậy chúng ta đã đi qua 3 bài học cơ bản để bắt đầu với Expo – React Native. Bài học hôm nay tiếp tục với nội dung tùy biến giao diện cơ bản trong React native. Chúc các em đầu tuần vui vẻ nhé 🙂

Để bắt đầu chúng ta cùng xem ví dụ sau :

Có 2 cách để tùy biến giao diện cho 1 Component trong React native như sau :

  • Khai báo array style

Thông thường để cho code đc rành mạch và dễ quản lý, lập trình viên sẽ sử dụng StyleSheet.create để tạo array các style và lưu tất các cùng 1 chỗ.

Các thành phần đc phân cách bởi dấy phẩy, mỗi tham số style bao gồm tên + : + { thuộc tính tùy chỉnh giao diện}
Có thể gọi 1 hoặc nhiều style trong thẻ Component
  • Khai báo trực tiếp trong thẻ

Nếu không muốn khai báo trong array style các em có thể viết trực tiếp trong thẻ của Component như sau :

Tuy nhiên, trong lập trình chúng ta nên ưu tiên sử dụng cách 1 để dễ quản lý và code sẽ ngắn gọn hơn.

  • Chiều dài vs Chiều rộng

Các dễ nhất để điều chỉnh chiều dài (height) và chiều rộng (width) của Component nằm trong style. Các em lưu ý tất cả các Component của React Native đều không có đơn vị mà được tính theo Density-independent Pixels. (Giải thích ở cuối bài)

  • Flex Dimensions

flex là 1 thuộc tính trong style của component, flex cho phép hiển thị 1 component kéo dãn hoặc tràn tối đa không gian trống. Thông thường chúng ta sẽ sử dụng flex = 1. tùy trường hợp, nếu trong 1 màn hình chứa nhiều component cùng có thuộc tính flex thì khi này flex mang ý nghĩa là tỉ lệ. Các em có thể tham khảo ví dụ sau :

Trong ví dụ : 3 View chiếm lần lượt 1 phần, 2 phần và 3 phần của màn hình
  • Flexbox

Các component nếu chứa các thành phần giao diện con bên trong thì đều có thể tùy chỉnh vị trí hoặc các thức hiển thị hay sắp xếp của các thành phần con đó thông qua các thuộc tính cơ bản sau :

  1. Flex Direction
  2. Justify Content
  3. Align Items

Flex Direction : cho phép các thành phần con sẽ được hiển thị theo cột từ trên xuống dứoi hoặc theo hàng từ trái qua phải. Giá trị có thể là row hoặc column . Mặc định sẽ là column nếu các em ko đặt gì

Align Items : quy định cách các thành phần con hiển thị theo trục chính . Nếu row thì trục chính là chiều ngang và ngược lại, nếu column thì trục chính là chiều dọc. Justify Content hỗ trợ các cách tùy biến sau : flex-startcenterflex-endspace-aroundspace-between and space-evenly.

Các em chạy thử link này để so sánh và hiểu cách sử dụng của mỗi từ khóa

Justify Content: quy định cách các thành phần con hiển thị theo trục thứ 2 . Ví dụ : nếu trục chính là chiều ngang thì khi này chiều dọc sẽ là trục thứ 2 và ngược lại. Align Items hỗ trợ các cách tùy biến sau : flex-startcenterflex-end, and stretch.

flex-start : Các thành phần được căn lề trên sát với trục 2

center : Các thành phần được căn giữa so với trục 2

flex-end : Các thành phần được căn lề dưới so với trục 2

stretch : Các thành phần bị kéo dãn vào chiếm toàn bộ không gian theo chiều trục 2

  • dp hay dip: Density-independent Pixels – Đây là một đơn vị đo chiều dài vật lý cũng giống như inch, cm, mm. Đơn vị này được lấy làm chuẩn trên màn hình 160dpi (Dots per inch), nghĩa là, 1dp sẽ tương đương với 1px trên màn hình có kích thước 160dpi. Khi chạy trên màn hình có mật độ màn hình (Screen Density – tính bằng dpi) lớn hơn, số pixel dùng để vẽ nên 1dp sẽ tỉ lệ với với kích thước dpi của màn hình. Tương tự như vậy với màn hình có mật độ màn hình nhỏ hơn. Tỉ lệ giữa dp và px sẽ thay đổi tùy vào các loại màn hình khác nhau, nhưng không nhất thiết lúc nào cũng tỉ lệ thuận. 160 dp = 1 inch –> điều này có nghĩa 1dp = 1/160 = 0.00625 inch Lưu ý : 1 dp có thể chứa 1 hay nhiều pixel.

Như vậy là chúng ta đã tìm hiểu về Styles trong React Native. Trong bài học tiếp theo chúng ta sẽ cùng tìm hiểu 2 Component cơ bản trong React Native đó là Button và InputText. Mọi thắc mắc các em bình luận tại đây nhé . Chúc các em 1 ngày làm việc vui vẻ 🙂