CSS React Native 中的三角形

Question

我正在开发一个使用三角形覆盖其他 containers/divs 的应用程序。如果之前用 CSS 解决了这个问题：

.triangle:after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
  left: -15px;
  width: 0;
  border-width: 0px 0px 15px 15px;
  border-style: solid;
}

但这在 React 中不再起作用。去这里的最佳解决方案是什么？

Answer 1

最好的方法是创建一个 <Image> 组件并绝对定位它，类似于纯 CSS 三角形。如果三角形的颜色是单调的，而不是渐变或其他图案，您可以使用 tintColor 样式属性.

设置它的颜色

示例：

<Image
  source={require('image!triangle')}
  style={{tintColor: '#008080'}}
/>

Answer 2

仍然可以使用 CSS 技巧在 React Native 中绘制三角形。我写了一个class来封装这个：https://github.com/Jpoliachik/react-native-triangle

如果你想自己写，我用了这个工具：http://apps.eky.hk/css-triangle-generator/ 生成了我想要的三角形，并将样式修改为 React Native 语法。

例如，在 CSS 中指向上方的 90x90 等腰三角形显示为：

width: 0;
height: 0;
border-style: solid;
border-width: 0 45px 90px 45px;
border-color: transparent transparent #007bff transparent;

但在 React Native 中，样式将是：

triangle: {
     width: 0,
     height: 0,
     backgroundColor: 'transparent',
     borderStyle: 'solid',
     borderTopWidth: 0,
     borderRightWidth: 45,
     borderBottomWidth: 90,
     borderLeftWidth: 45,
     borderTopColor: 'transparent',
     borderRightColor: 'transparent',
     borderBottomColor: 'red',
     borderLeftColor: 'transparent',
   },

Answer 3

为什么不使用专用库？ https://github.com/react-native-community/react-native-svg

Answer 4

render() {
    return (
        <View style={[styles.triangle,styles.arrowUp]}/>
    );
}

和样式

const styles = {
    triangle: {
        width: 0,
        height: 0,
        backgroundColor: 'transparent',
        borderStyle: 'solid',
    },
    arrowUp: {
        borderTopWidth: 0,
        borderRightWidth: 30,
        borderBottomWidth: 30,
        borderLeftWidth: 30,
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: "tomato",
        borderLeftColor: 'transparent',
    },
    arrowRight: {
        borderTopWidth: 30,
        borderRightWidth: 0,
        borderBottomWidth: 30,
        borderLeftWidth: "tomato",
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: "tomato",
    },
    arrowDown: {
        borderTopWidth: 30,
        borderRightWidth: 30,
        borderBottomWidth: 0,
        borderLeftWidth: 30,
        borderTopColor: "tomato",
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent',
    },
    arrowLeft: {
        borderTopWidth: 30,
        borderRightWidth: "tomato",
        borderBottomWidth: 30,
        borderLeftWidth: 0,
        borderTopColor: 'transparent',
        borderRightColor: "tomato",
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent',
    },
    arrowUpLeft: {
        borderTopWidth: 30,
        borderRightWidth: "tomato",
        borderBottomWidth: 0,
        borderLeftWidth: 0,
        borderTopColor: "tomato",
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent',
    },
    arrowUpRight: {
        borderTopWidth: 0,
        borderRightWidth: "tomato",
        borderBottomWidth: 30,
        borderLeftWidth: 0,
        borderTopColor: 'transparent',
        borderRightColor: "tomato",
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent',
    },
    arrowDownLeft: {
        borderTopWidth: 30,
        borderRightWidth: 0,
        borderBottomWidth: 0,
        borderLeftWidth: "tomato",
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: "tomato",
    },
    arrowDownRight: {
        borderTopWidth: 0,
        borderRightWidth: 0,
        borderBottomWidth: 30,
        borderLeftWidth: "tomato",
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: "tomato",
        borderLeftColor: 'transparent',
    },
}

来源：https://github.com/Jpoliachik/react-native-triangle

Answer 5

初学者：

大多数 CSS 的新手都对这个三角形感到困惑，我的回答可能很长，但请完整阅读。

其实用CSS样式画三角形是为了“Borders”的美感，如果你们仔细观察边框的末端，你会发现边框的末端不是直的让我告诉你，通过改变每个边框的颜色。

container having borders

应用于上图的样式是：

{
   height: 100px;
   width: 100px;
   border-style: solid;
   border-left-width: 10px;
   border-right-width: 10px;
   border-top-width: 10px;
   border-bottom-width: 10px;
  
   border-left-color: pink;
   border-right-color: red;
   border-top-color: gray;
   border-bottom-color: green;
}

现在仔细观察上图你会发现，如果你增加边框宽度，它看起来会在一定程度上像三角形。

将边框宽度从 10px 增加到 50px 后，我们得到了这些结果：

<!DOCTYPE html>
<html>
<head>
<style>

div {
  height: 100px;
  width: 100px;
  border-style: solid;
  border-left-width: 50px;
  border-right-width: 50px;
  border-top-width: 50px;
  border-bottom-width: 50px;
  
  border-left-color: pink;
  border-right-color: red;
  border-top-color: gray;
  border-bottom-color: green;
}

</style>
</head>

<body>
<div>I'm a container having colorful borders of 50px each</div>
<p><strong>Note:</strong> All the borders are not straight at their endings</p>
</body>
</html>

到目前为止，我们能够理解它，但是有一个问题我们无法得到三角形的尖端，这是因为我们在容器中有 space 来避开尖端边界和生产平面而不是尖端。

要在容器内去掉这个 space 只需将高度和宽度设置为 0px，然后查看结果。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  border-left-style: solid;
  border-left-width: medium;
}

div {
  height: 0px;
  width: 0px;
  border-style: solid;
  border-left-width: 50px;
  border-right-width: 50px;
  border-top-width: 50px;
  border-bottom-width: 50px;
  
  border-left-color: pink;
  border-right-color: red;
  border-top-color: gray;
  border-bottom-color: green;
}
</style>
</head>
<body>


<div></div>

<p><strong>Note:</strong> All the borders are not straight at their endings</p>

</body>
</html>

到现在我们几乎完成了所有工作，现在我们可以通过玩转样式来制作任何三角形。如果你想做一个向上的三角形，那么给右、左、上边框透明色就可以了，像这样：

{
   height: 0px;
   width: 0px;
   border-style: solid;
   border-left-width: 50px;
   border-right-width: 50px;
   border-top-width: 50px;
   border-bottom-width: 50px;
  
   border-left-color: transparent;
   border-right-color: transparent;
   border-top-color: transparent;
   border-bottom-color: green;
}

如果你不想 space 在三角形的顶端上方那么你很清楚 space 被具有透明颜色的“topBorder”消耗，你可以摆脱那个 space 通过给出 "border-top-width:0px;"或者将其从您的样式中删除。

React Native

在 react-native 中将使用相同的技术，只需在 camelNotation 中编写您的样式，例如 (borderTopWidth, borderBottonWidth ...)

更进一步，我希望您自己玩代码。

参考：本文post中使用的图片是使用w3schools在线代码编辑器生成的。

w3schools Code Editor

CSS React Native 中的三角形

CSS Triangles in React Native

css

stylesheet

reactjs

react-native