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上

有任何想法吗？？谢谢!

Answer 1

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

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

Answer 2

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