web-dev-qa-db-ja.com

Reactネイティブのボーダーの半径がアウトラインになります

リアクションネイティブを使用してサークルビューを作成したいと思います。

ここで私がしたこと：

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>

結果は次のとおりです。

enter image description here

丸みを帯びた輪郭があります。

あの輪郭は欲しくない。ボーダー半径を削除して確認したところ、以下のようなアウトラインはありません。

enter image description here

この問題についてはわかりません。助けてください...

javascriptcssreact-nativeoutline
19
Luc

それで、なぜそれがあなたの現在のルールとその非常に小さな赤い境界線を与えるのか、完全にはわかりません。実際のバグである可能性があります。私が正しく理解しているかどうかに関係なく、あなたはその小さな赤い境界線のない円を望んでいます。これは、borderプロパティを削除することで実現できます。

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

その結果：

enter image description here

境界線が必要な場合、考えられる回避策は次のとおりです。

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>

その結果：

enter image description here

9
klvs

再編集：この ボーダー半径の問題 は 孤立していない で動作することがわかりますが、一般的なcssの既知の問題であり、[および修正]何度も。私はこれを見つけました リンク 、それは彼らが解決策を見つけたと引用するだけでなく、原因も述べています。問題のリンクは、最初はボックスシャドウに関連していると指摘していますが、簡単なGoogle検索から、border-radiusに関する多くの問題があるようです。

原因：

ボーダーの半径が要素の高さよりも大きい場合（パディング、フォントサイズなどを考慮に入れて）、この視覚的なエラーが発生することがわかりました。

フィドルは github リンク http://jsfiddle.net/2HqTZ/ で与えられます（html2canvasを使用）

以前に提案されたソリューション answer 1- expoへのリンク

以前に提案されたソリューションを編集 answer 2-expo link

現在/最良の解決策（私のもの）IMHOlink

これが最善の解決策だと思います。境界線の色がcircedge cssで省略され、circle cssのみで残された場合、境界線の「アウトライン」効果が大幅に減少することに注意しました。 caniuse.com で既知の問題を読んだ後、borderRadiusをborderTopLeftRadiusなどに置き換えました

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