¿Cómo puedo crear un borde diagonal en React Native?

Estoy trabajando en la construcción de una aplicación React Native basada en diseños de nuestro diseñador. El diseño tiene varios lugares donde hay botones o formas con una línea diagonal (vea el ejemplo siguiente). He intentado usar SkewX pero eso parece girar la forma entera (y no parece funcionar en Android de todos modos). ¿Cómo puedo dibujar un rectángulo / botón con un borde diagonal en un lado?

Botón con borde diagonal

2 Solutions collect form web for “¿Cómo puedo crear un borde diagonal en React Native?”

Puede aplicar css a la clase View y crear la salida deseada, Heres una pequeña versión demo versión editada

 import React, { Component } from 'react'; import { View, StyleSheet } from 'react-native'; import { Constants } from 'expo'; export default class App extends Component { render() { return ( <View style={styles.container}> <View style={styles.triangleCorner}></View> <View style={styles.triangleCornerLayer}></View> <View style={styles.triangleCorner1}></View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '#ecf0f1', },triangleCorner: { position: 'absolute', top:105, left:0, width: 300, height: 100, backgroundColor: 'transparent', borderStyle: 'solid', borderRightWidth: 50, borderTopWidth: 80, borderRightColor: 'transparent', borderTopColor: 'gray' },triangleCorner1: { position: 'absolute', top:100, left:0, width: 130, backgroundColor: 'transparent', borderStyle: 'solid', borderRightWidth: 50, borderTopWidth: 90, borderRightColor: 'transparent', borderTopColor: 'green' },triangleCornerLayer: { position: 'absolute', top:107, left:0, width:297, height: 100, backgroundColor: 'transparent', borderStyle: 'solid', borderRightWidth: 47, borderTopWidth: 75, borderRightColor: 'transparent', borderTopColor: 'white' } }); 

Resultado:

Introduzca aquí la descripción de la imagen

Utilice CALayer para ese tipo de forma.

Debajo del código para eso:

  let layer = CAShapeLayer() let path = UIBezierPath() path.move(to: CGPoint(x: 0, y: 0)) path.addLine(to: CGPoint(x: 150, y: 0)) path.addLine(to: CGPoint(x: 100, y: 50)) path.addLine(to: CGPoint(x: 0, y: 50)) path.close() layer.path = path.cgPath layer.fillColor = UIColor.green.cgColor layer.strokeColor = UIColor.clear.cgColor view.layer.addSublayer(layer) let layer1 = CAShapeLayer() path.move(to: CGPoint(x: 100, y: 45)) path.addLine(to: CGPoint(x: 300, y: 45)) path.addLine(to: CGPoint(x: 350, y: 5)) path.addLine(to: CGPoint(x: 150, y: 5)) path.close() layer1.path = path.cgPath layer1.fillColor = UIColor.clear.cgColor layer1.strokeColor = UIColor.black.cgColor view.layer.addSublayer(layer1) 
  • ¿Cómo puedo abrir el menú de dev en el dispositivo real?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.