Đối với View
https://reactnative.dev/docs/view-style-props
-
- Kích thước (rộng, cao): bằng thuộc tính width, height
- Màu nền: Bằng thuộc tính: backgroundColor
- Khung viền: Dùng nhóm thuộc tính border (borderColor, borderWidth…)
- Bo tròn góc: borderRadius
- Độ dày của khung viền: borderWidth
- Độ trong suốt: opacity (thuộc tính này nhận giá trị từ 0->1: tỉ lệ % trong suốt của nền)
Đối với text
Áp dụng định dạng cho chữ https://reactnative.dev/docs/text-style-props
-
- Màu chữ: dùng thuộc tính: color
- Cỡ chữ dùng thuộc tính: fontSize
- Kiểu chữ đậm/nghiêng: fontStyle
- Đường gạch chân: dùng nhóm thuộc tính textDecorationXXXX
- Đổ bóng chữ: dùng nhóm thuộc tính textShadowXXXXX
Hiệu ứng đổ bóng cho View
https://reactnative.dev/docs/shadow-props
Định dạng layout
-
- https://reactnative.dev/docs/layout-props
- Khi trình bày layout cần nắm chắc các thuộc tính định dạng View
- Cần bao gói các thành phần vào trong 1 thẻ View sau đó định dạng
- Nếu cần sắp xếp các phần tử con theo hàng ngang thì thẻ view cha đặt thuộc tính flexDirection:”row” , các phần tử con muốn chia đều kích thước thì đặt thuộc tính flex:1 cho phần tử con. Dùng thuộc tính flexWrap nếu muốn tự rơi xuống dòng khi hết chiều rộng hoặc chặn không cho rơi xuống dòng.
- Nếu sắp xếp theo chiều dọc thì flexDirection:”column”
- Dóng nội dung bên trong thẻ: justifyContent
- Khoảng cách giữa các phần tử: margin
- Khoảng cách từ khung viền tới nội dung phần tử: padding
- Xếp chồng giữa các phần tử: z-index (số to sẽ ở phía trước, số bé sẽ ẩn phía sau) (android có thuộc tính elevation )
Đặt một phần tử trôi nổi trên màn hình
Sử dụng các thuộc tính: position:absolute; sau đó kết hợp thuộc tính left hoặc top để định vị trí phần tử