React Native 中的 CSS 三角形
Posted
技术标签:
【中文标题】React Native 中的 CSS 三角形【英文标题】：CSS Triangles in React Native 【发布时间】：2015-07-24 20:45:46 【问题描述】：我正在开发一个使用覆盖其他容器/div 的三角形的应用程序。之前用 CSS 解决了这个问题：
.triangle:after
content: "";
display: block;
position: absolute;
top: 15px;
left: -15px;
width: 0;
border-width: 0px 0px 15px 15px;
border-style: solid;
但这在 React 中不再起作用了。去这里的最佳解决方案是什么？
【问题讨论】：
生成的 DOM 最终是什么样子的？看起来应该仍然有效。 【参考方案1】：仍然可以使用 CSS 技巧在 React Native 中绘制三角形。 我写了一个类来封装这个：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',
,
【讨论】：
更新：目前仅适用于 ios。 android 支持的修复工作也在进行中。 github.com/facebook/react-native/issues/5411 是否可以为该三角形添加框阴影？如果在 android 中作为 'elevation' 应用，它会覆盖正方形区域。 @GeniusGo 您可能需要使用图像或 SVG 来实现这一点 - 因为它已经有点渲染技巧了，添加阴影可能很时髦。 （不过我没有在 iOS 上测试过）【参考方案2】：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
【讨论】：
非常棒的例子。【参考方案3】：对于初学者：
大多数刚接触 CSS 的人都对这个三角形感到困惑， 我的回答可能很长，但请完整阅读。
使用 CSS 样式绘制三角形其实是由于“边框”的美感，如果 你们仔细看看边框的末端，你会发现边框的末端不是直的，让我告诉你，通过改变每个边框的颜色。
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>到目前为止，我们能够理解它，但是有一个问题是我们无法获得三角形的尖端，这是因为我们在容器内部有空间，避免了边界的尖端并产生平坦的表面而不是小费。
要摆脱容器内的这个空间，只需将高度和宽度设置为 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;
如果您不希望三角形尖端上方有空间，那么您很清楚具有透明颜色的“topBorder”会占用空间，您可以通过给出“border-top-width: 0像素；"或将其从您的样式中删除。
反应原生
在 react-native 中将使用相同的技术，只需在 camelNotation 中编写您的样式，例如（borderTopWidth，borderBottonWidth ...）
进一步，我希望你自己玩代码。
参考：本文中使用的图片是使用 w3schools 在线代码编辑器生成的。
w3schools Code Editor
【讨论】：
【参考方案4】：为什么不使用专用库？ https://github.com/react-native-community/react-native-svg
【讨论】：
【参考方案5】：最好的方法是创建一个<Image> 组件并绝对定位它，类似于纯 CSS 三角形。如果三角形具有平面颜色，而不是渐变或其他图案，您可以使用 tintColor 样式属性设置其颜色。
例子：
<Image
source=require('image!triangle')
style=tintColor: '#008080'
/>
【讨论】：
所以我只是创建一个带有三角形的真实图像，然后将其着色为我需要的颜色？ 这不可能是正确的答案，因为三角形不是由 CSS 生成的以上是关于React Native 中的 CSS 三角形的主要内容，如果未能解决你的问题，请参考以下文章