React Native - iOS - 圆形带边框 - 圆形背景色溢出圆形

Question

我正在尝试在React Native中创建一个白色背景的圆形，但是遇到了这样的问题：圆形的边界线上会出现背景色。

可以查看这个 Playground 应用： https://rnplay.org/apps/TsQ-CA

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

这是圆形的样式：

circle: { borderRadius: 40, width: 80, height: 80, borderWidth: 5, borderColor: 'white', backgroundColor: 'black' }

P.S. 这只会发生在iOS上

有什么想法吗？ 谢谢！

- Uri Klar

Answer 1

你可以为圆形添加不同的边框颜色。尝试这样做

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

- gamingumar

---

backgroundColor: 'red' - gamingumar

Answer 2

这似乎是React Native中的一个bug。您可以通过使用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

---

这不会在屏幕上绘制任何东西！ - kittu88

更像是黑客行为。 - Harshit Saxena

Answer 3

尝试将样式属性设置为：

{
overflow: 'hidden'
} 

使用您的样式对视图样式进行设置。

- Harshit Saxena

---

这在我的情况下解决了问题，没有溢出隐藏，背景将占据包括边框在内的所有区域。 - Ethan.R

我正在制作半圆，它们在Android上完美运行，但是iOS会增加半圆的长度，使其看起来不正确。通过这一行解决方案，iOS可以绘制半圆。谢谢！ - iggirex