Android 如何在React Native中创建对角线边框？

我正在根据设计师的设计开发React原生应用程序。设计中有几个地方有一条对角线的按钮或形状（请参见下面的示例）。我尝试过使用SkewX，但这似乎只是旋转了整个形状（而且在Android上似乎不起作用）。如何绘制一侧有对角线边框的矩形/按钮

---

您可以将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'
  }
});

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet}；
从“expo”导入{Constants}；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
}，三角角：{
位置：'绝对'，
排名：105，
左:0,，
宽度：300，
身高：100，
背景色：“透明”，
边框样式：“实心”，
边线宽度：50，
边框宽度：80，
borderRightColor:“透明”，
borderTopColor:“灰色”
}，三角形角1：{
位置：'绝对'，
前100名，
左:0,，
宽度：130，
背景色：“透明”，
边框样式：“实心”，
边线宽度：50，
边框宽度：90，
borderRightColor:“透明”，
borderTopColor:“绿色”
}，三角形角图层：{
位置：'绝对'，
排名：107，
左:0,，
宽度：297，
身高：100，
背景色：“透明”，
边框样式：“实心”，
边线宽度：47，
边框宽度：75，
borderRightColor:“透明”，
borderTopColor:“白色”
}
});

结果：

---

使用

CALayer

制作这种形状

代码如下：

    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)

---

向下滚动到平行四边形。谢谢！这真的很有趣。在我原来帖子中的设计中，按钮的第二部分（你的灰色部分）实际上是带有灰色边框的白色。由于此方法需要使用边界来实际创建对角边，因此如何实现边界？我是否必须创建一个相同的

三角形Corner1

，除了2点不高，1点不宽的白色背景，并将其覆盖在灰色背景之上？看起来真的很乏味！>_我知道这有点乏味，但覆盖是唯一的选择，我知道这个问题是关于反应本机。这个代码看起来很快。