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

Posted 2023-04-13

【中文标题】如何在 React Native 中创建对角线边框？

【英文标题】：How do I create a diagonal border in React Native?

【发布时间】：2017-11-30 22:27:47

【问题描述】：

我正在根据我们设计师的设计构建一个 React Native 应用程序。该设计有几个地方有按钮或带有一条对角线的形状（参见以下示例）。我尝试过使用SkewX，但这似乎只是旋转了整个形状（而且似乎无论如何都不适用于android）。如何绘制一侧带有对角线边框的矩形/按钮？

【问题讨论】：

browniefed.com/blog/the-shapes-of-react-native 向下滚动到平行四边形。

【参考方案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'
  
);

结果：

【讨论】：

谢谢！这真的很有趣。在我原始帖子的设计中，按钮的第二部分（你的灰色部分）实际上是白色的，带有灰色边框。由于这种方法需要使用边框来实际创建对角线边缘，我将如何实现边框？我是否必须创建一个相同的triangleCorner1，除了高 2 点和宽 1 点，白色背景并将其覆盖在灰色背景上？看起来真的很乏味！ >_

我知道它有点乏味，但覆盖是我知道的唯一选择

【参考方案2】：

对这种形状使用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)

【讨论】：

这个问题是关于 React Native 的。此代码似乎是 Swift。