React Nativeで対角の枠線を作成するにはどうすればよいですか？

Question

私はデザイナーのデザインに基づいてReact Nativeアプリを開発しています。デザインには、1つの対角線を持つボタンや図形がある場所がいくつかあります（次の例を参照）。私はSkewXを使用しようとしましたが、それはちょうど全体の形を回転させるようです（とにかくAndroidでは動作しないようです）。私はどのように四角形/ボタンを片側に斜めの境界線を描くことができますか？

Answer 1

あなたはViewクラスにCSSを適用し、所望の出力を作成することができ、 相続人の小さなデモコード編集されたバージョン

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

結果：

Answer 2

を使用そのような形状のための。そのためのコードの下

：

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)