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

Question

我正在尝试在本机反应中创建一个具有白色背景的圆圈，并且我遇到了一个问题，即在边框的轮廓上可以看到圆圈的背景颜色。

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

如果你仔细观察，你会发现圆圈周围有一条细黑线。就像边框没有覆盖整个背景一样。

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

PS这只发生在iOS上

有任何想法吗？？谢谢！

原文由 Uri Klar 发布，翻译遵循 CC BY-SA 4.0 许可协议

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'
  },
});

原文由 Haitao Li 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 gamingumar 发布，翻译遵循 CC BY-SA 4.0 许可协议