Native React'ta köşegen kenarlık nasıl oluşturabilirim?

Question

Tasarımcıdan tasarımlara dayanan bir React Native uygulaması oluşturmaya çalışıyorum. Tasarım, bir diyagonal çizgiyle düğmeler veya şekiller bulunan birkaç yere sahiptir (aşağıdaki örneğe bakınız). Ben SkewX kullanarak denedim ama bu sadece tüm şekli döndürmek gibi görünüyor ve (zaten Android üzerinde çalışmıyor gibi görünüyor). Bir tarafta köşegen kenarlıklı bir dikdörtgen/düğme nasıl çizebilirim?

Answer 1

Sen View sınıfa css uygulamak ve istenilen çıktıyı oluşturabilir, İşte küçük bir demo kodu düzenlenmiş versiyonu

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' 
    } 
}); 

Sonuç:

Answer 2

kullanın Bu tür bir şekil için. Bunun için Kodun altında

:

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)