React Native边框半径构成轮廓

Question

我想通过使用react-native来创建圆形视图.

我在这做了什么:

circle: {
    position: 'absolute',
    borderWidth: 10,
    borderColor: '#fff',
    top: 20,
    left: 30,
    width: 150,
    height: 150,
    borderRadius: 150 / 2,
    backgroundColor: '#ED1D27',
  }

并查看

<View style={styles.circle}></View>

结果是:

圈子上有轮廓和轮廓.

我不想要那个大纲.我检查了删除边框半径,它没有如下所示的轮廓:

我不知道这个问题,请帮帮我...

Answer 1

所以我不完全确定为什么它会给你当前规则的那个非常小的红色边框.这可能是一个真正的错误.无论我理解正确,你都想要一个没有那个小红色边框的圆圈.您可以通过删除border属性来实现:

position: 'absolute',
top: 20,
left: 30,
width: 150,
height: 150,
borderRadius: 150 / 2,
backgroundColor: '#ED1D27',

导致:

如果您确实需要边框,可能的解决方法可能是:

inner: {
  position: 'relative',
  width: 150,
  height: 150,
  borderRadius: 150 / 2,
  backgroundColor: '#ED1D27',
},
outter:{
  position: 'absolute',
  paddingTop:10,
  paddingLeft:10,
  top: 20,
  left: 30,
  width: 170,
  height: 170,
  borderRadius: 160 / 2,
  backgroundColor: '#000',
},

与heirarchy相似的观点:

  <View style={styles.container}>
    <View style={styles.outter}>
      <View style={styles.inner}></View>
    </View>
  </View>

导致: