reactjs React Native中的CSS三角形

zfciruhq  于 2023-01-12  发布在  React
关注(0)|答案(6)|浏览(244)

我正在开发一个应用程序，它使用三角形来覆盖其他容器/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中已经不起作用了。这里的最佳解决方案是什么？

reactjs

6条答案

按热度按时间
ego6inou

ego6inou1#

在React Native中仍然可以使用CSS技巧来绘制三角形。我编写了一个类来封装它：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',
   },
赞(0）分享  回复(0）举报  2023-01-12
n53p2ov0

n53p2ov02#

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

赞(0）分享  回复(0）举报  2023-01-12
x4shl7ld

x4shl7ld3#

对于初学者：

大多数刚接触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;
}

现在仔细观察上面的图片，你会发现如果你增加边框的宽度，它在某种程度上看起来会像一个三角形。
将边框宽度从10 px增加到50 px后，我们得到以下结果：

<!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>

到目前为止，我们能够理解它，但有一个问题，我们无法得到三角形的尖端，这是因为我们有空间内的容器，这是避免边界的尖端和生产平面，而不是尖端。
要消除容器内部的空间，只需将高度和宽度设置为0 px，然后查看结果。

<!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”占用的，你可以通过以下两种方法之一来消除这个空间：“或者把它从你的风格中删除。

响应本机

相同的技术将用于react-native，只是用camelNotation编写您的样式，例如（borderTopWidth，borderBottonWidth...）
对于进一步我想你应该玩代码自己。

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

w3schools Code Editor

赞(0）分享  回复(0）举报  2023-01-12
qfe3c7zg

qfe3c7zg4#

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

赞(0）分享  回复(0）举报  2023-01-12
iecba09b

iecba09b5#

这将在两个平台上给予适当的平滑三角形：

根据要求，可针对不同三角形调整borderWidth和borderColor属性。
Sample

<View style={{
    width: 0,
    height: 0,
    borderStyle: 'solid',
    overflow: 'hidden',
    borderTopWidth: 6,
    borderRightWidth: 4,
    borderBottomWidth: 0,
    borderLeftWidth: 4,
    borderTopColor:'blue',
    borderRightColor: 'transparent',
    borderBottomColor: 'transparent',
    borderLeftColor: 'transparent',)}
}} />

Example

const PropertyMarker = () => (
    <View style={styles.shadowWrapper}>
      <View
        style={styles.backgroundMarkerView()}>
        <Text
          style={styles.selectedText()}>
          MARKER_TEXT
        </Text>
      </View>
      <View style={styles.arrowDown()} />
      <View
        style={styles.arrowDown2()}
      />
    </View>
  )

const styles = StyleSheet.create({
  shadowWrapper: {alignItems: 'center', },
  selectedText: (marginStart = 0, color = COLOR_BLACK_100) => ({
    color,
    ...fontSize.fontSizeExtraSmall(),
    ...fonts.fontFamilyBold(),
    lineHeight: 16,
    marginStart,
  }),
  backgroundMarkerView: (backgroundColor = COLOR_SECONDARY) => ({
    padding: 4,
    borderRadius: 8,
    backgroundColor,
    borderWidth: 1,
    borderColor: COLOR_WHITE,
  }),
  arrowDown: (borderTopColor = 'blue') => ({
    width: 0,
    height: 0,
    borderStyle: 'solid',
    overflow: 'hidden',
    borderTopWidth: 6,
    borderRightWidth: 4,
    borderBottomWidth: 0,
    borderLeftWidth: 4,
    borderTopColor,
    borderRightColor: 'transparent',
    borderBottomColor: 'transparent',
    borderLeftColor: 'transparent',
  }),
  arrowDown2: (borderTopColor = 'blue') => ({
    width: 0,
    height: 0,
    borderStyle: 'solid',
    overflow: 'hidden',
    borderTopWidth: 5,
    borderRightWidth: 3,
    borderBottomWidth: 0,
    borderLeftWidth: 3,
    borderTopColor,
    borderRightColor: 'transparent',
    borderBottomColor: 'transparent',
    borderLeftColor: 'transparent',
    marginTop: -7,
  }),
})
赞(0）分享  回复(0）举报  2023-01-12
igsr9ssn

igsr9ssn6#

最好的方法是创建一个<Image>组件，然后像处理纯CSS三角形一样确定其位置。如果三角形是平面颜色，而不是渐变或其他图案，则可以使用tintColor style属性设置其颜色。
示例：

<Image
  source={require('image!triangle')}
  style={{tintColor: '#008080'}}
/>
赞(0）分享  回复(0）举报  2023-01-12
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com