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',
},

具有如下视图层次结构：

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

结果：

Answer 2

重新编辑：事实证明，这个border-radius问题对于单独使用react来说不是孤立的，而是一个普遍的CSS已知问题，已经被多次提出[并标记为已修复]。我找到了这个link，引用了他们找到的解决方案，但也说明了原因。有问题的链接最初引用它与 box-shadow 有关，但从快速的谷歌搜索来看，似乎有许多与 border-radius 相关的问题。

给出原因：

事实证明，如果你的边框半径大于高度 元素（考虑填充、字体大小等） 就会出现这种视觉错误。

在github链接中给出了小提琴http://jsfiddle.net/2HqTZ/（带有html2canvas）

---

之前提出的解决方案答案1-世博会链接

编辑了之前提出的解决方案答案 2 - 博览会链接

（我的）当前/最佳解决方案恕我直言链接

我认为这是最好的解决方案。我注意到，如果边框颜色在 circedge css 中被省略，但仅保留在circle css 中，则边框“轮廓”效果会大大降低。在阅读了 caniuse.com

上的已知问题后，我还用 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',
  }
});

Answer 3

我知道已经过去很长时间了，但我遇到了这个问题。看起来只有 iOS 上才会出现这种情况。想分享我的修复：

我通过更改代码来修复它，以便具有边框半径的对象没有边框。这样我就可以将其添加到其样式中：

borderColor: "rgba(0,0,0,0)"