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

Question

私はReactデザイナーのデザインに基づいたネイティブアプリの構築に取り組んでいます。デザインには、1本の対角線を持つボタンまたは形状がある場所がいくつかあります（次の例を参照）。 SkewXを使用してみましたが、形状全体が回転しているように見えます（とにかく、Android）では機能しないようです）。片側の斜めの境界線？

Answer 1

CssをViewクラスに適用して、目的の出力を作成できます。ここに小さなデモコード編集バージョンがあります

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

結果：