CSS Triangles in React india

Question

ich auf einer App gerade arbeite, die Dreiecke verwendet, die andere Container/div-Tags überlagern. Hatte das mit CSS vorher gelöst:

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

aber das funktioniert nicht mehr in React. Was ist die beste Lösung, um hier zu gehen?

Answer 1

Der beste Weg, dies zu tun, ist eine <Image> Komponente zu erstellen und absolut zu positionieren, ähnlich wie Sie ein reines CSS-Dreieck. Wenn das Dreieck eine flache Farbe hat, im Gegensatz zu einem Farbverlauf oder einem anderen Muster, können Sie seine Farbe mit der Stileigenschaft tintColor festlegen.

Beispiel:

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

Answer 2

Es ist immer noch möglich, Dreiecken zu zeichnen in der india Reagieren des CSS-Trick. ich eine Klasse schrieb diese verkapseln: https://github.com/Jpoliachik/react-native-triangle

Wenn Sie es selbst schreiben möchte, habe ich dieses Tool: http://apps.eky.hk/css-triangle-generator/ das Dreieck zu erzeugen, ich wollte, und die Stile ändern native Syntax zu reagieren.

Zum Beispiel kann ein Isosceles 90x90 Dreieck in CSS zeigt nach oben lautet:

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

Aber in React india die Stile würde:

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

Warum nicht eine eigene Bibliothek benutzen? https://github.com/react-native-community/react-native-svg