溢出隐藏没有影响

我有一个简单的进度条，它有一个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%' 
    } 
}

这是什么样子：

我把其中绿色是覆盖边界箭头。绿色不应该溢出边缘。

有谁知道这是为什么？

来源

2017-03-29 Noitidart

其实我现在正在测试它，似乎在iOS上工作正常，但Android是现在有溢出问题的人。看起来目前仍然获得更多支持。一个临时的解决方法，就是在progressbarfill上添加相同的borderRadius。

这里是在本地做出反应文档中的问题：

溢出样式属性默认为隐藏，并且不能在Android上改变这是如何呈现的Android工程的结果。这功能尚未开展工作，因为这将是一个重要的承诺，并且还有很多更重要的任务。

与溢出的另一个问题：Android上的“隐藏”：一个观点并没有由父的borderRadius裁剪即使父母有溢出： “隐藏”启用 - 内观的角落将是可见之外圆角。这仅限于Android;它在iOS上的预期效果为。请参阅corresponding issue。

来源

2017-03-30 20:07:47

Ooo非常感谢泰勒为此。这是你阅读它的地方 - https://facebook.github.io/react-native/releases/0.26/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-不能在android上更改？ – Noitidart

是啊！没问题。我正在研究一些更新的版本，您可能会检查您的React native版本，并查看这些版本说明是否适合您。我知道这些已经过时了，但我找不到任何修正此问题的新版本，但是可能？我有0.42，我仍然有这个问题...所以如果你解决它！让我知道！ @Noitidart –

谢谢你的提示，我一定会让你知道的。我也在0.42 :) – Noitidart

溢出隐藏没有影响

回答

相关问题