Bài 5 : Xây dựng layout với flexbox trong react native

2023-04-27 02:35:16

VIDEO HƯỚNG DẪN

Bài học hôm nay chúng ta sẽ tìm hiểu các sử dụng flexbox trong react native, áp dụng flex để xây dựng layout ứng dụng

FLEX

flex sẽ xác định cách các item của bạn sẽ “lấp đầy” không gian có sẵn dọc theo trục chính của bạn. Không gian sẽ được phân chia theo thuộc tính flex của từng phần tử.

Trong ví dụ sau, các chế độ xem màu đỏ, cam và xanh lục đều là các chế độ xem con trong chế độ xem vùng chứa có flex: 1 bộ. Chế độ xem màu đỏ sử dụng flex: 1 , chế độ xem màu cam sử dụng flex: 2 và chế độ xem màu lục sử dụng flex: 3 . 1+2+3 = 6, có nghĩa là chế độ xem màu đỏ sẽ chiếm 1/6 không gian, màu cam chiếm 2/6 diện tích và màu xanh lục chiếm 3/6 diện tích.

import React from 'react';
import {StyleSheet, View} from 'react-native';

const Flex = () => {
  return (
    
      
      
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default Flex;

Flex Direction

flexDirection kiểm soát hướng của các phần tử con. Đây cũng được gọi là trục chính. Trục phụ là trục vuông góc với trục chính hoặc trục mà các đường bao được bố trí

Justify Content

Justify Content: Quy định sự phân bổ vị trí các component con theo trục tọa độ :​
các component con sẽ được phân bổ theo vị trí đầu, cuối, có khoảng trắng ở giữa hoặc trung tâm.(flex-start, flex-end, center, space-between, space-around, space-evenly)​

Align Items

Align Items: Quy định sự phân bổ vị trí các component con theo trục tọa độ thứ hai:​
bao gồm : stretch, flex-start, flex-end, center, baseline

Align Self

Thuộc tính Align Self gần giống với Align Items, nhưng sẽ được set ở view con, tác động đến chính nó trên hệ quy chiếu là view cha. Align Self sẽ có độ ưu tiêsn cao hơn Align Item

live demo

Flex Wrap

Khi tổng chiều dài hoặc chiều rộng của các items trong view lớn hơn view cha thì chúng có thể được cắt thành một hàng hoặc cột mới.

Absolute & Relative Layout

Xác định vị trí của một phần tử xác định cách nó được định vị trong phần tử cha của nó.(Phần này giống với css web)

XEM LIVE NHÉ