溢出隐藏没有影响

Question

我有一个简单的进度条，它的borderRadius和overflow设置为hidden。我有一个这样的孩子，它没有borderRadius，并且它在角落之外溢出。这是我的标记：

        <View style={style.progressbar}>
            <View style={[style.progressbarfill, { width:'50%' }]} />
        </View>



const style = { 
    progressbar: {
        backgroundColor: '#ccc',
        height: 25,
        width: '90%',
        borderRadius: 12,
        overflow: 'hidden'
    },
    progressbarfill: {
        backgroundColor: 'springgreen',
        width: '10%',
        height: '100%'
    }
}

这就是它的样子：

我把箭头放在绿色覆盖边界的地方。绿色不应溢出边缘。

有谁知道这是为什么？

Answer 1

实际上我现在正在测试它，似乎在iOS上运行正常，但Android现在正在解决溢出问题。看起来目前仍在获得更多支持。临时修复，就是在progressbarfill上添加相同的borderRadius。

以下是React Native Docs的问题：

  

溢出样式属性默认为隐藏，无法更改   在Android上这是Android渲染工作的结果。这个   功能没有被处理，因为它将是一个重要的   承诺，还有许多重要的任务。

     

溢出的另一个问题：Android上的“隐藏”：视图不是   即使父级有溢出，父级的borderRadius也会剪切：   启用“隐藏” - 内部视图的角落将可见   在圆角外面。这仅适用于Android;它起作用   预计在iOS上。请参阅corresponding issue。