¿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?
- Reaccione la caja nativa de Flex no usando todo el espacio disponible
- React-Native ListView renderRow emite pases de paso. El camino correcto o el camino equivocado
- No se puede agregar un nodo que no tenga un nodo CSS a un nodo sin una función de medida
- Reaccionar Native Memory Leakage Animation Issue
- Cómo subir Image on server using ReactNative
- Siga la ubicación del usuario en React Native AirBnb MapView
- Variable Global / Constante en Reactivo Nativo
- ¿Cuál es la causa de este problema "No se puede convertir el argumento de la clase de tipo org.json.JSONArray" en reaccionar-androide nativo?
- Sobre la actualización de aire con React Native
- No se puede ejecutar "ANY" reaccionar proyecto ejemplo nativo
- Cambiar la ruta del archivo de entrada de android y ios en el proyecto reactivo-nativo
- ¿Cómo puedo abrir el menú de dev en el dispositivo real?
- Cajón de navegación 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:
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)