Chương 4 working with styles and layout

Horizontal centering  Sắp xếp các view con theo chiều ngang.. Các view được thêm vào sau được sắp xếp theo hướng mũi tên từ trái qua phải và không có view nào nằm đè lên view nào.. Các

Working with Styles and Layout

Chương 4

Nội dung

1 Layout and Flexbox

• Horizontal and vertical centering

• Absolute positioning

2 Styling the NavigationBar component

3 Styling the NoteScreen

1 Layout and Flexbox

a Horizontal centering

 Sắp xếp các view con theo chiều ngang Các view được thêm vào sau được sắp xếp theo hướng mũi tên từ trái qua phải và không có view nào nằm đè lên view nào.

b Vertical centering

 Sắp xếp view con theo chiều dọc Các view được thêm vào sau được sắp xếp theo h ướng mũi tên từ trên xuống và không có view nào nằm đè lên view nào

Hãy xem một ví dụ nhanh về cách Flexbox giúp bố cục dễ dàng hơn.

Khởi tạo một StyleSheet mới và xác định một số kiểu đơn giản cho các mục:

Bây giờ, chúng ta muốn kiểm soát vị trí các mục được căn dọc theo trục chính và trục chéo bằng justifyContent và

alignItems Tạo kiểu vùng chứa và đặt justifyContent và căn chỉnh các mục vào giữa:

Kết quả

Bây giờ ta thêm một đường viền xung quanh vùng chứa để hình dung nó:

Kết quả

Ta sẽ canh chỉnh lại sao cho hợp lý bằng cách thêm dòng lệnh sau:

Kết quả

c Absolute positioning (Định vị tuyệt đối)

 Đây là thuộc tính về posittion, sẽ định nghĩa vị trí mà view sẽ xuất hiện trong view cha

 Absolute: khi view được set posittion là absolute, nó được định độc lập so với các view k hác trong view cha

 Ví Dụ

Sử dụng absolute

c Absolute positioning (Định vị tuyệt đối)

Ngoài ra, React Native cung cấp cho bạn tùy chọn định vị các mục trên m

àn hình của bạn Điều này hoạt động giống như cách làm trong trình duy

ệt bằng cách xác định các thuộc tính top, left, right, and bottom

Nên thử tạo bố cục của mình trong Flexbox trước khi sử dụng Absolute p ositioning

2 Styling the NavigationBar component (Tạo kiểu cho thành phần Thanh điều hướng)

Navigation là 1 thư viện mở rộng c

ho React Native dùng để quản lý ,

di chuyển, gửi nhận tham số giữa

các màn hình với nhau

NavigationBar là thanh điều hướn

g

Tạo NavigationBar bằng cách thực

hiện dòng lệnh sau:

Nhập thêm các lệnh javascript

Cuối cùng ta sẽ được kết quả như hình bên

Changing the Android Material Theme (Thay đổi chủ đề vật liệu Android)

Màu của thanh trạng thái và điều hướng trên ứng dụng Android đang là màu đen đồng nhất Để thay đổi ta sửa nội dung của styles.xml thành như sau:

Sử dụng absolute

2 Styling the NoteScreen (Tạo kiểu cho NoteScreen)

Bây giờ ta sẽ gạch chân dưới các

TextInput bằng dòng lệnh sau đây

Khi code xong ta có kết quả sau đây:

Tuy nhiên đối với Android thì chưa đồng nhất nên t sẽ thêm một đoạn code sau:

Và đây là kết quả cuối cùng:

Kết quả

DEMO

THANKS