web-dev-qa-db-fra.com

React Le rayon de la bordure native fait le contour

Je voudrais faire la vue circulaire en utilisant react-native.

Voici ce que j'ai fait:

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

Et voir

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

Le résultat est:

enter image description here

Il y a un contour autour du cercle.

Je ne veux pas de ce plan. J'ai vérifié en supprimant le rayon de la bordure et il n'a pas de contour comme ci-dessous:

enter image description here

Je n'ai aucune idée de ce problème, veuillez m'aider ...

javascriptcssreact-nativeoutline
19
Luc

Je ne sais donc pas vraiment pourquoi cela donne cette toute petite bordure rouge à votre règle actuelle. Ce pourrait être un bug réel. Peu importe si je comprends bien, vous voulez un cercle sans cette petite bordure rouge. Vous pouvez y parvenir en supprimant votre propriété de bordure:

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

Résultant en:

enter image description here

Si vous voulez une bordure, une solution de contournement potentielle pourrait être:

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

Avec une hiérarchie de vue comme:

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

Résultant en:

enter image description here

9
klvs

RÉÉDITER: Il s'avère que ce problème de rayon de bordure est non isolé pour travailler avec réagir seul, mais un problème général connu de CSS, qui a été soulevé [et marqué comme fixe] plusieurs fois. J'ai trouvé cela lien , qui cite qu'ils ont trouvé une solution, mais en indique également la cause. Le lien dans le problème de la question le cite initialement comme étant lié à box-shadow, mais à partir d'une recherche rapide sur Google, il semble y avoir de nombreux problèmes avec border-radius.

Cause donnée:

Il s'avère que si votre rayon de bordure est supérieur à la hauteur de l'élément (en tenant compte du remplissage, de la taille de la police, etc.), cette erreur visuelle se produira.

Un violon est donné dans le github lien http://jsfiddle.net/2HqTZ/ (avec html2canvas)

Solution proposée plus tôt réponse 1- lien vers l'expo

Modification de la solution proposée précédemment réponse 2 - lien expo

Solution actuelle/meilleure (à moi) à mon humble avis lien

Je pense que c'est la meilleure solution. J'ai remarqué que si la couleur de la bordure était omise dans le CSS circedge mais laissée uniquement dans le CSS du cercle, l'effet de "contour" de la bordure était considérablement réduit. J'ai également remplacé borderRadius par borderTopLeftRadius, etc. après avoir lu les problèmes connus sur 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',
  }
});
2
Rachel Gallen