Hình tam giác CSS trong React Native

Question

Tôi đang làm việc trên ứng dụng sử dụng hình tam giác che phủ các vùng chứa/div khác. Đã giải quyết bằng CSS trước đây:

.triangle:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 15px; 
    left: -15px; 
    width: 0; 
    border-width: 0px 0px 15px 15px; 
    border-style: solid; 
} 

nhưng không hoạt động trong React nữa. Giải pháp tốt nhất để đi đến đây là gì?

Answer 1

Cách tốt nhất để làm điều này là tạo thành phần <Image> và hoàn toàn định vị nó, tương tự như cách bạn tạo tam giác CSS thuần túy. Nếu hình tam giác có màu phẳng, trái ngược với độ dốc hoặc hoa văn khác, bạn có thể đặt màu của hình tam giác bằng thuộc tính kiểu tintColor.

Ví dụ:

<Image 
    source={require('image!triangle')} 
    style={{tintColor: '#008080'}} 
/> 

Answer 2

Nó vẫn còn có thể vẽ hình tam giác trong Phản ứng Native bằng cách sử dụng thủ thuật CSS. Tôi đã viết một lớp để đóng gói này: https://github.com/Jpoliachik/react-native-triangle

Nếu bạn muốn viết nó cho mình, tôi sử dụng công cụ này: http://apps.eky.hk/css-triangle-generator/ để tạo ra hình tam giác tôi muốn và sửa đổi các phong cách để phản ứng cú pháp bản địa.

Ví dụ, một tam giác cân 90x90 hướng lên trong CSS đọc:

width: 0; 
height: 0; 
border-style: solid; 
border-width: 0 45px 90px 45px; 
border-color: transparent transparent #007bff transparent; 

Nhưng trong Phản ứng Native phong cách sẽ là:

triangle: { 
    width: 0, 
    height: 0, 
    backgroundColor: 'transparent', 
    borderStyle: 'solid', 
    borderTopWidth: 0, 
    borderRightWidth: 45, 
    borderBottomWidth: 90, 
    borderLeftWidth: 45, 
    borderTopColor: 'transparent', 
    borderRightColor: 'transparent', 
    borderBottomColor: 'red', 
    borderLeftColor: 'transparent', 
    }, 

Answer 3

Tại sao không sử dụng một thư viện chuyên dụng? https://github.com/react-native-community/react-native-svg