Chương 4 working with styles and layout

Chương ? TÊN CHƯƠNG CHƯƠNG 4 WORKING WITH STYLES AND LAYOUT PHÁT TRIỂN ỨNG DỤNG ĐA NỀN TẢNG TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT CÔNG NGHỆ Phone 0274 3834930 Website http //et tdmu edu vn NỘI DUNG[.]

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT

KHOA KỸ THUẬT - CÔNG NGHỆ

CHƯƠNG 4

WORKING WITH STYLES AND LAYOUT

PHÁT TRIỂN ỨNG DỤNG ĐA

NỀN TẢNG

NỘI DUNG

1

• React CSS

2

• Layout and Flexbox

1.React CSS

1.1 Style Sheet

 Style Sheet: là phần trừu tượng hóa của React Native

để khai báo các kiểu bằng cách sử dụng ký hiệu đối tượng Các thành phần có thể sử dụng bất kỳ kiểu nào, vì vậy nếu bạn thấy rằng bạn không thể có giao diện phù hợp, hãy tham khảo tài liệu React Native về thành phần đó trong phần style của nó

1.React CSS

 Để tạo một Style Sheet, hãy sử dụng phương thức Stylesheet.create ({ }) bằng cách truyền vào một đối tượng của các đối tượng:

1.React CSS

 Style được khai báo trên một thành phần bằng cách

sử dụng kiểu hỗ trợ

1.React CSS

1.2 Styling the SimpleButton component

- Trong phương thức kết xuất, hãy đặt thuộc tính style

của các thành phần View và Text từ các prop:

1.React CSS

1.2 Styling the SimpleButton component

Þ Từ các dòng lệnh JavaScript

trên ta được màn hình bên

1.React CSS

1.2 Styling the SimpleButton component

 React CSS không có khái niệm viết tắt, chẳng hạn như border: 1px solid # 000 Thay vào đó, mỗi mục được khai báo riêng lẻ

Ví dụ:

1.React CSS

1.2 Styling the SimpleButton component

-Thực hiện các lệnh Javascript sau:

1.React CSS

1.2 Styling the SimpleButton component

- Sau khi thực hiện lệnh Javascript

2.Layout and Flexbox

Flexbox là một thuộc tính giúp căn chỉnh vị trí tương đối của các thành phần con trong thành phần cha, có thể

sử dụng các thuộc tính flexDirection,

alignItems và justifyContent để thiết kế layout cho vị

trí các component

Có 2 đối tượng chính trong Flexbox:

Đối tượng bao quanh (container) chính là view cha

Đối tượng con bên trong (items) là các view con

2.Layout and Flexbox

2.1 Flexbox cho đối tượng cha (container)

- flexDirection:Sắp xếp các đối tượng con theo column

(chiều dọc) hoặc row (chiều ngang) 2 giá trị của nó là :

row hoặc column Mặc định là column

2.Layout and Flexbox

- justifyContent: Căn vị trí tương đối của đối tượng

con theo trục chính của flex Gồm các giá trị: flex-start,

center, flex-end, space-around, space-between

2.Layout and Flexbox

- Flex-wrap : wrap | no-wrap: Thuộc tính này cho

phép container bọc các items con mặc dù kích thước của chúng vượt qua kích thước của container Măc định là

no-wrap.

2.Layout and Flexbox

2.2 Flexbox cho đối tượng con (items)

- flex-grow: định nghĩa xem item sẽ được dãn ra bao

nhiêu để lấp vào khoảng trống của view cha

2.Layout and Flexbox

Ví dụ rằng có 3 view như sau, tổng chiều rộng nhỏ hơn view cha

2.Layout and Flexbox

Khi set flex-grow của view thứ nhất bằng 1, chiều rộng của nó sẽ

cộng thêm khoảng trống để dàn hết view cha

2.Layout and Flexbox

Giữ nguyên giá trị đó của view thứ nhất, ta set flex-grow của

view thứ 2 bằng 2 Kết quả như sau: chiều rộng của view thứ 2 đã được cộng thêm phần khoảng trống thừa bằng 2 lần view thứ nhất

2.Layout and Flexbox

- flex-shrink: Thuộc tính này có phần ngược lại so với flex-grow, nếu như tổng các item lớn hơn view cha, thì

thuộc tính này sẽ định nghĩa tỉ lệ bị trừ đi

Phone: 0274 3834930 Website: http://et.tdmu.edu.vn