Quan trọng

Tóm tắt một số kỹ thuật định dạng trong React Native

d52bb1 2024

  • Đố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ử

  • Định dạng ảnh

    https://reactnative.dev/docs/image-style-props#examples

Nguồn: zezo.dev