React Native背景颜色会影响绝对定位的子组件的溢出行为

Question

我正在尝试使用“溢出”的操作循环按钮来实现底部导航栏。

我使用代码

<View style={{
    position: 'absolute',
    right: 0,left: 0,bottom: 0,
    flex: 1,flexDirection: 'column'}}>

    <View style={{height: 1,backgroundColor: '#000',opacity: 0.3}} />
    <View style={{flex: 1, height: 50}}>
        <View style={{
            position: 'absolute',
            bottom: 10,left: 0,right: 0,
            borderRadius: 75,
            width: 56,height: 56,
            backgroundColor: 'red'}} />
    </View>
</View>

它能够给我以下效果：

到目前为止一切顺利。但是，当我尝试将背景颜色应用于父容器时，圆圈的“溢出”部分将被隐藏。

<View style={{
    position: 'absolute',
    right: 0,left: 0,bottom: 0,
    flex: 1,flexDirection: 'column',
    backgroundColor: 'blue'}}>

    <View style={{height: 1,backgroundColor: '#000',opacity: 0.3}} />
    <View style={{flex: 1, height: 50}}>
        <View style={{
            position: 'absolute',
            bottom: 10,left: 0,right: 0,
            borderRadius: 75,
            width: 56,height: 56,
            backgroundColor: 'red'}} />
    </View>
</View>

结果

我在理解行为方面遇到一些困难，并希望寻求解释。

另一方面，通过将圆圈移动为当前父容器的兄弟，我可以实现我想要的外观（背景颜色的父级+溢出圆圈）。这种行为对我来说是可以理解的，但我也想知道是否有任何方法可以保持当前的DOM层次结构，同时仍然具有我想要的效果。