Css 如何在React Native中创建伪元素

在React Native中，我有一个带有

绝对位置的框，我将在它后面放置另一个框。我知道如何在CSS中实现这一点的唯一方法是使用伪元素，如下所示：

CSS:

HTML:



那么，我怎样才能在React Native中做同样的事情呢？可以给我一个伪元素吗？
好的，然后用更简单的方法演示。然而，我怀疑您不知道如何以更简单的方式使用
absolute
时做同样的事情。是的，这不是我的意思
div1
必须是
absolute
。这个问题与react native无关。。。
#parent {
  width: 500px;
  height: 500px;
  background-color: white;
  border: 2px solid blue;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#parent::before {
  content: '';
  width: 60%;                           
  height: 60%;                         
}

#div1 {
  background: green;
  width: 30%;
  height: 30%;
  position: absolute;
  left: 50%;                            
  top: 50%;                             
  transform: translate(-50%,-50%);      
}

#div2 {
  background: red;
  width: 30%;
  height: 30%;
}

<div id="parent">
  <div id="div1"></div>
  <div id="div2"></div>
</div>