[英]React Native border radius makes outline
I would like to make the circle view by using react-native.我想通过使用 react-native 来制作圆形视图。
Here what I did:这是我所做的:
circle: {
position: 'absolute',
borderWidth: 10,
borderColor: '#fff',
top: 20,
left: 30,
width: 150,
height: 150,
borderRadius: 150 / 2,
backgroundColor: '#ED1D27',
}
And view并查看
<View style={styles.circle}></View>
The result is:结果是:
There is and outline rounded the circle.有圆形的轮廓。
I don't want that outline.我不要那个大纲。 I checked by remove the border radius and it has no outline like below:
我通过删除边框半径进行了检查,它没有如下轮廓:
I have no idea for this issue, please help me...我对这个问题不了解,请帮我...
So I am not entirely sure why it gives that very small red border with your current rule. 所以我不完全确定为什么它会给你当前规则的那个非常小的红色边框。 It could be an actual bug.
这可能是一个真正的错误。 Regardless if I understand correctly, you want a circle without that small red border.
无论我理解正确,你都想要一个没有那个小红色边框的圆圈。 You can achieve that by removing your border property:
您可以通过删除border属性来实现:
position: 'absolute',
top: 20,
left: 30,
width: 150,
height: 150,
borderRadius: 150 / 2,
backgroundColor: '#ED1D27',
Resulting in: 导致:
If you do want a border, a potential workaround could be: 如果您确实需要边框,可能的解决方法可能是:
inner: {
position: 'relative',
width: 150,
height: 150,
borderRadius: 150 / 2,
backgroundColor: '#ED1D27',
},
outter:{
position: 'absolute',
paddingTop:10,
paddingLeft:10,
top: 20,
left: 30,
width: 170,
height: 170,
borderRadius: 160 / 2,
backgroundColor: '#000',
},
With a view heirarchy like: 与heirarchy相似的观点:
<View style={styles.container}>
<View style={styles.outter}>
<View style={styles.inner}></View>
</View>
</View>
Resulting in: 导致:
RE-EDIT: Turns out that this border-radius issue is not isolated to working with react alone, but a general css known issue, that has been raised [and marked as fixed] numerous times. 重新编辑:事实证明,这个边界半径问题 不是孤立的 ,只能单独作出反应,而是一个已知问题的一般css,已被多次提出[并标记为已修复]。 I found this link , that cites they found a solution, but also states the cause.
我发现这个链接 ,引用他们找到了解决方案,但也说明了原因。 The link in question's problem cites it initially as being related to box-shadow but from a quick google search there seems to many issues with border-radius.
有问题的链接引用它最初与盒子阴影相关,但是从快速谷歌搜索看来,边界半径似乎有很多问题。
Given cause: 给定原因:
It turns out that if your border radius is larger than the height of the element (taking in to account padding, font-size, and so forth) this visual error will occur.
事实证明,如果您的边界半径大于元素的高度(考虑填充,字体大小等),将发生此视觉错误。
A fiddle is given in the github link http://jsfiddle.net/2HqTZ/ (with html2canvas) github链接http://jsfiddle.net/2HqTZ/ (带有html2canvas)给出了一个小提琴
Earlier proposed solution answer 1- link to expo 早先提出的解决方案答案1-链接到世博会
Edited earlier proposed solution answer 2 - expo link 编辑前面提出的解决方案答案2 - 世博链接
Current/ best solution (of mine) IMHO link 当前/最佳解决方案(我的)恕我直言 链接
I think this is the best solution. 我认为这是最好的解决方案。 I noted that if the border color was left out in the circedge css but left in only the circle css, the border 'outline' effect is greatly reduced.
我注意到如果边框颜色在圆圈css中被遗漏但仅留在圆圈css中,则边框“轮廓”效果会大大降低。 I also replaced borderRadius with borderTopLeftRadius etc after reading the known issues on caniuse.com
在阅读了caniuse.com上的已知问题后,我还用borderTopLeftRadius等替换了borderRadius
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.square} />
<View style={styles.circedge}/>
<View style={styles.circle}>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 2,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#fff',
},
square: {
position: 'absolute',
top: 30,
left: 30,
width: 200,
height: 100,
backgroundColor: 'red'
},
circle: {
position: 'absolute',
borderColor: '#fff',
top: 60,
left: 60,
width: 150,
height: 150,
borderTopLeftRadius:150/2,
borderTopRightRadius:150/2,
borderBottomLeftRadius:150/2,
borderBottomRightRadius:150/2,
backgroundColor: '#ED1D27',
},
circedge:{
position: 'absolute',
paddingTop:10,
paddingLeft:10,
top: 50,
left: 50,
width: 170,
height: 170,
borderTopLeftRadius:170/2,
borderTopRightRadius:170/2,
borderBottomLeftRadius:170/2,
borderBottomRightRadius:170/2,
backgroundColor: '#fff',
}
});
Add overflow: hidden
along with the borderRadius
& borderWidth
property.添加
overflow: hidden
以及borderRadius
和borderWidth
属性。
I think this is caused due to some extra pixels outside the element, when adding overflow as hidden it gets removed.我认为这是由于元素外部的一些额外像素造成的,当添加溢出时隐藏它会被删除。
Actually RN issue https://github.com/facebook/react-native/issues/17267实际上 RN 问题https://github.com/facebook/react-native/issues/17267
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.