CSS Triangoli in Reagire Native

Question

Sto lavorando su un'applicazione che utilizza i triangoli che si sovrappongono altri contenitori/div. Che era risolto con i CSS prima:

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

ma che non funziona in Reagire più. Qual è la soluzione migliore per andare qui?

Answer 1

Il modo migliore per farlo è creare un componente <Image> e posizionarlo assolutamente, in modo simile a come si farebbe con un triangolo CSS puro. Se il triangolo ha un colore piatto, al contrario di una sfumatura o di un altro motivo, puoi impostarne il colore usando la proprietà di stile tintColor.

Esempio:

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

Answer 2

E 'ancora possibile disegnare triangoli in Reagire nativo utilizzando il trucco CSS. ho scritto una classe per incapsulare questo: https://github.com/Jpoliachik/react-native-triangle

Se vuoi scrivere da soli, ho usato questo strumento: http://apps.eky.hk/css-triangle-generator/ per generare il triangolo che volevo e modificare gli stili di reagire sintassi nativa.

Ad esempio, un triangolo isoscele 90x90 rivolta verso l'alto in CSS legge:

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

Ma in Reagire Native stili sarebbero:

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

perché non utilizzare una libreria dedicato? https://github.com/react-native-community/react-native-svg