React native - 伪元素等价物

Question

我想在顶部创建一个带有条纹的按钮，它看起来像是在按钮后面（图片如下）。

我已经使用 :: after 伪类在纯CSS中解决了这个问题。但我不确定如何在React中做到这一点。任何建议或帮助都是适用的。

Answer 1

有一种使用迷人的div的方法。

const IconDiamond = glamorous.div(
  {
    width: 0,
    height: 0,
    border: '50px solid transparent',
    borderBottomColor: 'red',
    position: 'relative',
    top: '-50px',
    '&::after': {
      content: `''`,
      position: 'absolute',
      left: '-50px',
      top: '50px',
      width: '0',
      height: '0',
      border: '50px solid transparent',
      borderTopColor: 'red',
    }
  },
)

请注意：

• CSS属性必须按照react https://facebook.github.io/react/docs/dom-elements.html#style

  的方式进行驼峰式包装

• 使用content属性时，您需要确保引号包含在传递的字符串中，即content：''`

• 伪元素之前和之后的语法是'＆:: before'：{＆'＆:: after'：{https://github.com/paypal/glamorous#example-style-objects

请检查此以获取更多信息：https://github.com/paypal/glamorous/issues/223

要详细了解迷人的div https://glamorous.rocks/basics