Jak utworzyć przekątną w trybie React Native?

Question

Pracuję nad budową aplikacji React Native na podstawie projektów naszego projektanta. Projekt ma kilka miejsc, w których znajdują się przyciski lub kształty z jedną linią ukośną (patrz poniższy przykład). Próbowałem już używać SkewX, ale wydaje się, że po prostu obraca cały kształt (i nie wydaje się działać na Androida w każdym razie). Jak mogę narysować prostokąt/przycisk z przekątną po jednej stronie?

Answer 1

Można zastosować css do View klasy i stworzyć pożądany wynik, Herezje mały kod demo wersja edytowany

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

Wynik:

Answer 2

Użyj CALayer dla tego rodzaju kształtu.

poniższy kod na to:

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)