Reactネイティブボーダー半径はアウトラインを作成します

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

RE-EDIT：このborder-radius issueだけで反応するでの作業にnot isolatedであることが判明したが、[固定とし、マーク]提起されている一般的なCSSの既知の問題、多数回。私はこれが解決策を見つけたことを挙げているが、原因を述べている、linkを見つけました。問題の問題のリンクは、最初は箱の影に関連していると言いますが、すばらしいGoogle検索ではボーダー半径に関する多くの問題があるようです。

を考える原因：

それはあなたの国境半径が 要素の高さよりも大きい場合（などパディング、フォントサイズをアカウントに取って、と）ことが判明し この視覚的にエラーが発生します。

フィドルは、以前の提案されたソリューションanswer 2 - expo link

電流/最適なソリューションを（編集（html2canvas付き）githubリンクhttp://jsfiddle.net/2HqTZ/

---

以前提案された解決策answer 1- link to expo

に与えられています私の）IMHOlink

私はこれが最善の解決策だと思います。私は境界カラーがcircedge CSSではなく、サークルCSSだけに残っていれば、境界のアウトライン効果が大幅に減少することに気付きました。私はまた、回避策を見つけるでしょうcaniuse.com

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