溢出隐藏无影响

Question

我有一个简单的进度条，它有一个borderRadius和溢出设置为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上运行得很好，但是安卓系统现在有溢出的问题。目前看来，这仍然得到更多的支持。一个临时的修复方法是，只需在级数填充上添加相同的borderRadius。

以下是Reactive原住民文档的问题：

溢出样式属性默认为隐藏的，不能在Android上更改，这是Android呈现工作方式的结果。由于这将是一项重要的工作，而且还有许多更重要的任务，因此没有对这一特性进行研究。 溢出的另一个问题:Android上的“隐藏”：即使父视图有溢出：“隐藏”启用，视图也不会被父borderRadius裁剪--内部视图的角将在圆角之外可见。这只在Android上运行，在iOS上可以正常工作。见相应问题。

Answer 2

我发现，除了父级需要的overflow: 'hidden'之外，我还需要添加到父级的backgroundColor: 'transparent'。

编辑:我还发现，有时测试这需要刷新我的应用程序。