React native - 等效的伪元素答案

【问题标题】：React native - pseudo elements equivalentReact native - 等效的伪元素
【发布时间】：2018-07-18 07:04:53
【问题描述】：

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

我已经通过使用 ::after 伪类在纯 CSS 中解决了这个问题。但我不确定如何在 React 中做到这一点。如有任何建议或帮助，我们将不胜感激。

【问题讨论】：

React Native 中没有伪元素。您需要使用另一个元素来实现此 UI。

【解决方案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 的行使用驼峰式大小写
使用内容属性时，您需要确保引号包含在传递的字符串中，即内容：''`
before 和 after 伪元素的语法是 '&::before': { & '&::after': { https://github.com/paypal/glamorous#example-style-objects

查看更多信息：https://github.com/paypal/glamorous/issues/223

了解更多关于魅力div的信息https://glamorous.rocks/basics

【讨论】：