在本机反应中具有背景颜色的嵌套透明视图？

Question

我想添加一个带有背景色的透明子视图，所以我所做的是孩子有边框左下角半径并且它是透明的，它的父级有白色背景色，但这就是我实现的，我想做的白色背景是否不会覆盖带有边框左下半径的透明视图：

我当前的代码：

<StyledView1>
  <StyledView2 />
</StyledView1>
<MainContentContainer
  topRightRadius
  bottomLeftRadius
  bottomRightRadius
> ....


const StyledView1 = styled.View`
  height: 100px;
  background-color: #fff;
`;

const StyledView2 = styled.View`
  height: 100px;
  background-color: transparent;
  border-bottom-left-radius: 75px;
`;

const MainContentContainer = styled.View<MainContentSectionProps>`
  flex: 1;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background-color: green;
  ${(props) => css`
    ${props.topLeftRadius && `border-top-left-radius: ${BORDER_RADIUS}px;`}
    ${props.topRightRadius &&
    `border-top-right-radius: ${BORDER_RADIUS}px;`}
    ${props.bottomLeftRadius &&
    `border-bottom-left-radius: ${BORDER_RADIUS}px;`}
    ${props.bottomRightRadius &&
    `border-bottom-right-radius: ${BORDER_RADIUS}px;`}
  `};
`;

下面是我想用这个实现的设计：

Answer 1

像这样使用 rgba 颜色值。

背景颜色：“rgba(255,255,255,0.5)”；

最后一个值是从0到1的alpha值，0是透明的，1是不透明的。