Sử dụng Border Radius để tạo các hình (tiếp tục)
Tạo các hình dáng trong ảnh trên là tương đối đơn giản, như thể hiện ở đoạn code dưới. Trung thực thì, phần mẹo
mực nhất về code này là đảm bảo bạn không làm text quá lớn hay quá dài. Tôi sẽ thể hiện cho bạn cái tôi
định nói gì ngắn gọn, trong đoạn code dưới nữa.
Chú ý đặc biệt tới style cái trung tâm hóa text. Bạn có may mắn bằng cách sử dụng margin: 10. Nếu bạn đã sử dụng
padding: 10, nền của text component sẽ chặn lại stroke border nằm dưới của View component (xem ảnh dưới).
Theo mặc định, một Text component kế thừa màu nền của component cha của nó. Vì bounding box của Text component
là một hình chữ nhật, nền đè lên các góc làm tròn xinh đẹp. Rõ ràng là, sử dụng đặc tính margin giải quyết vấn
đề, nhưng nó cũng là có thể sửa tình huống theo cách khác. Bạn có thể thêm backgroundColor: ‘transparent’ vào
centeredText style. Làm nền của text component trong suốt cho phép border nằm dưới để thể hiện qua và trông
bình thường trở lại, như thể hiện ảnh trên.
