Chương 4 working with styles and layout

Chương Working with Styles and Layout Nội dung  Layout and Flexbox • Horizontal and vertical centering • Absolute positioning  Styling the NavigationBar component  Styling the NoteScreen Layout and Flexbox  a Horizontal centering  Sắp xếp view theo chiều ngang Các view thêm vào sau xếp theo hướng mũi tên từ trái qua phải khơng có view nằm đè lên view  b Vertical centering  Sắp xếp view theo chiều dọc Các view thêm vào sau xếp theo h ướng mũi tên từ xuống khơng có view nằm đè lên view Hãy xem ví dụ nhanh cách Flexbox giúp bố cục dễ dàng Khởi tạo StyleSheet xác định số kiểu đơn giản cho mục: Bây giờ, muốn kiểm sốt vị trí mục dọc theo trục trục chéo justifyContent alignItems Tạo kiểu vùng chứa đặt justifyContent chỉnh mục vào giữa: Kết Bây ta thêm đường viền xung quanh vùng chứa để hình dung nó: Kết Ta canh chỉnh lại cho hợp lý cách thêm dòng lệnh sau: Kết c Absolute positioning (Định vị tuyệt đối)  Đây thuộc tính posittion, định nghĩa vị trí mà view xuất view cha  Absolute: view set posittion absolute, định độc lập so với view k hác 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ị mục m àn hình bạn Điều hoạt động giống cách làm trình ệt cách xác định thuộc tính top, left, right, and bottom  Nên thử tạo bố cục Flexbox trước 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 thư viện mở rộng c ho React Native dùng để quản lý , di chuyển, gửi nhận tham số hình với  NavigationBar điều hướn g  Tạo NavigationBar cách thực dòng lệnh sau: Nhập thêm lệnh javascript Cuối ta kết hình bên Changing the Android Material Theme (Thay đổi chủ đề vật liệu Android) Màu trạng thái điều hướng ứng dụng Android màu đen đồng Để thay đổi ta sửa nội dung styles.xml thành sau: Sử dụng absolute Styling the NoteScreen (Tạo kiểu cho NoteScreen)  Bây ta gạch chân TextInput dòng lệnh sau Khi code xong ta có kết sau đây:  Tuy nhiên Android chưa đồng nên t thêm đoạn code sau: Và kết cuối cùng: Kết DEMO THANKS ...Nội dung  Layout and Flexbox • Horizontal and vertical centering • Absolute positioning  Styling the NavigationBar component  Styling the NoteScreen Layout and Flexbox  a Horizontal... kết hình bên Changing the Android Material Theme (Thay đổi chủ đề vật liệu Android) Màu trạng thái điều hướng ứng dụng Android màu đen đồng Để thay đổi ta sửa nội dung styles. xml thành sau: Sử... m àn hình bạn Điều hoạt động giống cách làm trình ệt cách xác định thuộc tính top, left, right, and bottom  Nên thử tạo bố cục Flexbox trước sử dụng Absolute p ositioning 2 Styling the NavigationBar