React Native - ios - 带边框的圆圈 - 圆形背景颜色溢出圆圈

Question

我试图创建一个具有白色背景的圆圈，并且我有一个问题，即在边框的轮廓上看到圆圈的背景颜色。

查看这个游乐场应用： https://rnplay.org/apps/TsQ-CA

如果你仔细观察，你会发现圈子周围有一条细黑线。它就像边界不覆盖整个背景。

这是圆圈样式： circle: { borderRadius: 40, width: 80, height: 80, borderWidth: 5, borderColor: 'white', backgroundColor: 'black' }

P.S。这只发生在iOS上

任何想法？ 谢谢！

Answer 1

这看起来像React Native中的一个错误。您可以使用2个圆圈解决它：

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.outerCircle}>
      	  <View style={styles.innerCircle} />
      	</View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  outerCircle: {
    borderRadius: 40,
    width: 80,
    height: 80,
    backgroundColor: 'white',
  },
  innerCircle: {
    borderRadius: 35,
    width: 70,
    height: 70,
    margin: 5,
    backgroundColor: 'black'
  },
});

Answer 2

您可以为圆圈添加不同的边框颜色。试试这个

container: {
  width: 60,
  height: 60,
  borderRadius: 60 / 2,
  backgroundColor: defaultColor,
  borderColor: 'black',
  borderWidth: 3
}

Answer 3

尝试将样式道具设置为

{
overflow: 'hidden'
} 

使用View样式的样式。