Javascript 覆盖比React Native中的父样式组件小

我对样式化组件有以下问题。我想用一个新的圆圈来隐藏背景，但是前面的圆圈更小，即使我的大小值相同。 下面是我的代码示例：

从“React”导入React；
从“react native”导入{StyleSheet，View}；
常数大小=50；
导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“白色”，
对齐项目：“中心”，
辩护内容：“中心”，
},
第1层：{
宽度：大小，
高度：尺寸，
边框宽度：3，
边界半径：大小/2，
边框颜色：“黑色”，
位置：“绝对”，
},
第二层：{
宽度：大小，
高度：尺寸，
边框宽度：3，
边界半径：大小/2，
边框颜色：“白色”，
位置：“绝对”，
},
});

下面是截图：

有人知道为什么覆盖层比背景层小吗

---

最好的问候和感谢

在我看来，这似乎是因为。
在大多数浏览器上默认设置为

框大小：内容框、填充和边框宽度添加到高度和宽度中。

但使用
框大小：边框框、填充和边框宽度包含在设置的宽度和高度内。

所以..

您可能需要添加
框大小：边框框

我通常将其添加到我的整个文档中

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


编辑（添加屏幕截图后）

问题不在于一个圆小。。。只是黑暗的边界从下面窥视

下面是一个例子，您可以更改颜色和可见性，使错误变得明显。运行代码段并选中第二个复选框以快速查看它


功能颜色更改（e）{
var target=e.target.getAttribute（'data-target'）；
var style=e.target.getAttribute（'data-style'）；
var col=e.目标值；
document.getElementById（目标）.style[style]=col；
}
功能变化（e）{
var target=e.target.getAttribute（'data-target'）；
document.getElementById（target.style.display=（e.target.checked）？'block'：'none'；
}
函数toFront（e）{
var other=‘layer1’；
如果（e.target.value=='layer1'）{
var other=‘layer2’；
}
var otherz=document.getElementById（其他）.style.zIndex；
var层=document.getElementById（e.target.value）；
layer.style.zIndex=parseInt（otherz）+1；
}
document.getElementById（'border-col1'）。addEventListener（'change'，colorchange）；
document.getElementById（'border-col2'）。addEventListener（'change'，colorchange）；
document.getElementById（'background-col1'）。addEventListener（'change'，colorchange）；
document.getElementById（'background-col2'）。addEventListener（'change'，colorchange）；
document.getElementById（'vis1'）。addEventListener（'change'，visChange）；
document.getElementById（'vis2'）。addEventListener（'change'，visChange）；
document.getElementById（'front1'）。addEventListener（'change'，toFront）；
document.getElementById（'front2'）。addEventListener（'change'，toFront）
html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
#容器{
弹性：1；
背景色：白色；
对齐项目：居中；
证明内容：中心；
}
#第1层{
宽度：50px；
高度：50px；
边框宽度：3倍；
边界半径：25px；
边框颜色：黑色；
位置：绝对位置；
边框样式：实心；
}
#第二层{
宽度：50px；
高度：50px；
边框宽度：3倍；
边界半径：25px；
边框颜色：白色；
位置：绝对位置；
边框样式：实心；
}
#投入{
位置：绝对位置；
顶部：0px；
右：0px；
填充：10px；
}

边框颜色
背景色
可见性
（显示块/无）
在前面
这是渲染引擎绘制两条重叠路径的方式。他们只是有点反现实。您可以通过稍微增加前圆的宽度和高度来解决此问题，也可以隐藏后圆的宽度和高度参见此代码，无需使用任何外部库即可：


import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“react native”导入{StyleSheet，View，ViewPropTypes，I18nManager}；
//react本机版本的兼容性<0.44
const ViewPropTypesStyle=ViewPropTypes
? ViewPropTypes.style
：View.propTypes.style；
让方向=I18nManager.isRTL？“右'：'左'；
const styles=StyleSheet.create({
外圆：{
为内容辩护：“中心”，
对齐项目：“居中”，
},
内圈：{
溢出：“隐藏”，
为内容辩护：“中心”，
对齐项目：“居中”，
},
左换行：{
位置：'绝对'，
排名：0，
[`${direction}`]：0，
},
半圆：{
位置：'绝对'，
排名：0，
左:0,，
borderTopRightRadius:0，
borderBottomRightRadius:0，
},
});
函数百分比到阶数（百分比）{
收益率*3.6；
}
导出默认类CircularProgress扩展组件{
静态类型={
颜色：PropTypes.string，
shadowColor:PropTypes.string，
bgColor:PropTypes.string，
半径：需要PropTypes.number.isRequired，
borderWidth:PropTypes.number，
百分比：PropTypes.number.isRequired，//eslint禁用行反应/无未使用的道具类型
子项：PropTypes.node，
容器样式：ViewPropTypesStyle，
外观样式：ViewPropTypesStyle，
};
静态defaultProps={
颜色：“#f00”，
阴影颜色：'#999'，
bgColor:“#e9e9ef”，
边界宽度：2，
children:null，
容器样式：空，
};
建造师（道具）{
超级（道具）；
this.state=this.getInitialStateFromProps（props）；
}
不安全组件将接收道具（下一步）{
this.setState（this.getInitialStateFromProps（nextProps））；
}
getInitialStateFromProps（props）{
常数