Создание css-кругов в реагировании

У меня возникли проблемы с созданием css-кругов в native-native. Следующие работы в iPhone 6 Plus, но во всех других iPhone, они становятся бриллиантами.

circle: {
  height: 30,
  width: 30,
  borderRadius: 30,
}

Теперь, если я использую PixelRatio на borderRadius, он работает во всем, кроме iPhone 6 плюс. iPhone 6 plus делает его коробками с закругленными углами.

circle: {
  height: 30,
  width: 30,
  borderRadius: 30 / PixelRatio.get(),
}

Ответы

Ответ 1

ваш радиус границы должен быть половины ширины и высоты. как показано ниже:

circle: {
   width: 44,
   height: 44,
   borderRadius: 44/2
}

Ответ 2

borderRadius должен быть на половину от квадрата. Так что 15 в вашем случае - независимо от того, какое соотношение пикселей имеет устройство.

Он работает с 30 / PixelRatio.get() только для 2x устройств сетчатки, поэтому результат равен 15. Тогда для iPhone 6 Plus вы действительно получите округленную коробку, потому что результат равен 10 (соотношение пикселей равно 3).

Я удивлен, что вы сказали, что это работает на iPhone 6 Plus с 30 для площади 30x30.

Ответ 3

Ничто из этого не соответствует моим потребностям, если вам нужен отзывчивый круг, вы можете попробовать использовать мое решение:

Шаг 1: импорт размеров (и других используемых элементов) из собственного реагирующего (или добавление в существующий список импорта)

import { Dimensions, TouchableHighlight, Text } from 'react-native';

Шаг 2: добавьте свой сенсорный элемент (вы можете рассчитать ширину или высоту устройства)

    <TouchableHighlight
      style = {{
        borderRadius: Math.round(Dimensions.get('window').width + Dimensions.get('window').height) / 2,
        width: Dimensions.get('window').width * 0.5,
        height: Dimensions.get('window').width * 0.5,
        backgroundColor:'#f00',
        justifyContent: 'center',
        alignItems: 'center'
      }}
      underlayColor = '#ccc'
      onPress = { () => alert('Yaay!') }
    >
      <Text> Mom, look, I am a circle! </Text>
    </TouchableHighlight>

Шаг 3: Наслаждайтесь своим отзывчивым кружком

React-native circle button

Ответ 4

Так как стиль borderRadius ожидает, что число в качестве значения вы не можете использовать borderRadius: 50%. Чтобы сделать круг, все, что вам нужно сделать, это использовать ширину и высоту изображения и разделить его на 2. Читайте больше здесь: https://github.com/refinery29/react-native-cheat-sheet

Ответ 5

Я использовал пакет styled-components для стилизации своих компонентов React Native, и самое простое решение, которое я нашел, это установить для border radius размер в px больше, чем половина ширины, которую когда-либо будет иметь окружность. Затем он будет по умолчанию эквивалентен 50% -ому граничному радиусу для любого размера меньше этого.