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

【问题标题】：React Native - ios - circle with border - circle background color spilling out of circleReact Native - ios - 带边框的圆圈 - 圆圈背景颜色溢出圆圈
【发布时间】：2017-05-30 13:04:37
【问题描述】：

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

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

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

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

附：这只发生在 iOS 上

有什么想法吗？？谢谢！

【问题讨论】：

标签： ios css react-native geometry

【解决方案1】：

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

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

【讨论】：

背景颜色：'红色'

【解决方案2】：

尝试将 style props 设置为

{
overflow: 'hidden'
}

在视图样式中添加您的样式。

【讨论】：

这解决了我的问题，没有隐藏溢出，背景将记录包括边界在内的所有区域
这个。我正在制作在 Android 中完美运行的半圆，但 iOS 增加了半圆的长度并使它们看起来不一样。通过这一行解决方案，iOS 可以绘制半圆。谢谢！

【解决方案3】：

这看起来像是 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'
  },
});

【讨论】：

这不会在屏幕上绘制任何东西！
更像是一个黑客。