Solución:
Todavía es posible dibujar triángulos en React Native usando el truco CSS. Escribí una clase para encapsular esto: https://github.com/Jpoliachik/react-native-triangle
Si desea escribirlo usted mismo, utilicé esta herramienta: http://apps.eky.hk/css-triangle-generator/ para generar el triángulo que quería y modificar los estilos para la sintaxis React Native.
Por ejemplo, un triángulo isósceles de 90×90 apuntando hacia arriba en CSS dice:
width: 0;
height: 0;
border-style: solid;
border-width: 0 45px 90px 45px;
border-color: transparent transparent #007bff transparent;
Pero en React Native los estilos serían:
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',
},
render() {
return (
<View style={[styles.triangle,styles.arrowUp]}/>
);
}
Y estilos
const styles = {
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
},
arrowUp: {
borderTopWidth: 0,
borderRightWidth: 30,
borderBottomWidth: 30,
borderLeftWidth: 30,
borderTopColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: "tomato",
borderLeftColor: 'transparent',
},
arrowRight: {
borderTopWidth: 30,
borderRightWidth: 0,
borderBottomWidth: 30,
borderLeftWidth: "tomato",
borderTopColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: 'transparent',
borderLeftColor: "tomato",
},
arrowDown: {
borderTopWidth: 30,
borderRightWidth: 30,
borderBottomWidth: 0,
borderLeftWidth: 30,
borderTopColor: "tomato",
borderRightColor: 'transparent',
borderBottomColor: 'transparent',
borderLeftColor: 'transparent',
},
arrowLeft: {
borderTopWidth: 30,
borderRightWidth: "tomato",
borderBottomWidth: 30,
borderLeftWidth: 0,
borderTopColor: 'transparent',
borderRightColor: "tomato",
borderBottomColor: 'transparent',
borderLeftColor: 'transparent',
},
arrowUpLeft: {
borderTopWidth: 30,
borderRightWidth: "tomato",
borderBottomWidth: 0,
borderLeftWidth: 0,
borderTopColor: "tomato",
borderRightColor: 'transparent',
borderBottomColor: 'transparent',
borderLeftColor: 'transparent',
},
arrowUpRight: {
borderTopWidth: 0,
borderRightWidth: "tomato",
borderBottomWidth: 30,
borderLeftWidth: 0,
borderTopColor: 'transparent',
borderRightColor: "tomato",
borderBottomColor: 'transparent',
borderLeftColor: 'transparent',
},
arrowDownLeft: {
borderTopWidth: 30,
borderRightWidth: 0,
borderBottomWidth: 0,
borderLeftWidth: "tomato",
borderTopColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: 'transparent',
borderLeftColor: "tomato",
},
arrowDownRight: {
borderTopWidth: 0,
borderRightWidth: 0,
borderBottomWidth: 30,
borderLeftWidth: "tomato",
borderTopColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: "tomato",
borderLeftColor: 'transparent',
},
}
Fuente: https://github.com/Jpoliachik/react-native-triangle
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)