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>

导致：

Answer 2

重新编辑：事实证明，border-radius issue not isolated仅仅是link处理单独的反应，而是一个已知的一般问题，已被多次提出[并标记为已修复]。我发现这个github，引用他们找到了解决方案，但也说明了原因。有问题的链接问题最初引用它与盒子阴影相关，但是从快速谷歌搜索看来，边缘半径似乎有很多问题。

原因：

事实证明，如果你的边界半径大于元素（考虑填充，字体大小等）这种视觉错误会发生。

http://jsfiddle.net/2HqTZ/链接answer 1- link to expo（带有html2canvas）

中给出了一个小提琴

早期提出的解决方案answer 2 - expo link

编辑前面提出的解决方案link

当前/最佳解决方案（我的）恕我直言 caniuse.com

我认为这是最好的解决方案。我注意到，如果边框颜色在圆圈css中被遗漏，但只留在圆圈css中，则边框“轮廓”为＆＃39;效果大打折扣。在阅读{{3}}

上的已知问题后，我还用borderTopLeftRadius等替换了borderRadius

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.square} />
        <View style={styles.circedge}/>
        <View style={styles.circle}>
         </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#fff',
  },
  square: {
    position: 'absolute',
    top: 30,
    left: 30,
    width: 200,
    height: 100,
    backgroundColor: 'red'
  },
  circle: {
    position: 'absolute',
    borderColor: '#fff',
    top: 60,
    left: 60,
    width: 150,
    height: 150,
    borderTopLeftRadius:150/2,
    borderTopRightRadius:150/2,
    borderBottomLeftRadius:150/2,
    borderBottomRightRadius:150/2,
    backgroundColor: '#ED1D27',
  },
  circedge:{
     position: 'absolute',
     paddingTop:10,
     paddingLeft:10,
     top: 50,
     left: 50,
     width: 170,
     height: 170,
     borderTopLeftRadius:170/2,
     borderTopRightRadius:170/2,
     borderBottomLeftRadius:170/2,
    borderBottomRightRadius:170/2,
     backgroundColor: '#fff',
  }
});

React Native边框半径构成轮廓

2 个答案: