Подтвердить что ты не робот

Реагировать Нативный радиус границы делает контур

Я хотел бы сделать представление круга, используя native-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>

Результат:

введите описание изображения здесь

Есть и контур округлен круг.

Я не хочу этого плана. Я проверил, удалил радиус границы и не имеет контура, как показано ниже:

введите описание изображения здесь

Я не знаю этой проблемы, пожалуйста, помогите мне...

4b9b3361

ОТВЕТЫ

Ответ 1

Поэтому я не совсем уверен, почему это дает очень маленькую красную границу с вашим текущим правилом. Это может быть реальной ошибкой. Независимо от того, правильно ли я понимаю, вам нужен круг без этой маленькой красной рамки. Вы можете добиться этого, удалив границу собственности:

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

Ответ 2

RE-EDIT: Оказывается, что эта проблема с border-radius не изолированный, чтобы работать с одними, но общая известная проблема css, которая была поднята [и отмечена как фиксированная] несколько раз. Я нашел ссылку , которая ссылается на то, что они нашли решение, но также указывает причину. Проблема, связанная с ссылкой, ссылается на нее первоначально как относящаяся к box-shadow, но из быстрого поиска в Google, похоже, много проблем с граничным радиусом.

Данная причина:

Оказывается, если ваш радиус границы больше высоты элемент (вход в учетную запись, размер шрифта и т.д.), эта визуальная ошибка произойдет.

Скрипка приведена в github ссылка http://jsfiddle.net/2HqTZ/ (с html2canvas)

Ранее предложенное решение ответить 1- ссылка на expo

Отредактировано ранее предложенное решение ответ 2 - ссылка на expo

Текущее/лучшее решение (мое) IMHO ссылка

Я думаю, что это лучшее решение. Я отметил, что если цвет границы был оставлен в circedge css, но оставлен только в круге css, эффект контура границы значительно уменьшается. Я также заменил borderRadius на borderTopLeftRadius и т.д., Прочитав известные проблемы на 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',
  }
});