Создание круга вокруг значка корзины в React Native?

Как создать круг вокруг этого значка. Пожалуйста, дайте мне предложение .. как добавить круг.

Теперь мой значок такой.

Как создать такой кругСоздание круга вокруг значка корзины в React Native?

<Animated.View
  ref = {view => view && (this.iconRef = view._component)}
  onLayout = {() =>
    this.iconRef &&
    this.iconRef.measure((x, y, width, height, pageX, pageY) =>
      this.props.onMeasure({
        x: pageX,
        y: pageY,
        width,
        height,
      })
    )
  }
  style = {[
    styles.iconContainer,
    {
      opacity: this.props.opacity,
      transform: [
        {
          scale: Animated.multiply(
            this.props.opacity.interpolate({
              inputRange: [0, 1],
              outputRange: [0.5, 1],
            }),
            this.props.scale
          ),
        },
      ],
    },
  ]}
>
  <Icon name = "trash-o" color = "white" style = {styles.icon} />
</Animated.View>

Используйте контейнер с border-radius: 50%;

zero298 31.08.2018 19:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
1 826
2

Ответы 2

Вы можете сделать что-то вроде этого,

<View style = {styles.iconWrapper}>
   <Icon name = "trash-o" color = "white" style = {styles.icon} />
</View>

iconWrapper стиль

iconWrapper: {
 width: 30,
 borderRadius: 15,
 backgroundColor: 'black',
 padding: 10
}

На самом деле borderRadius поддерживает только числа, поэтому «50%» выдает ошибку (JSON value '50%' of type NSString cannot be converted to NSNumber), по крайней мере, на iOS.

Jose Vf 31.08.2018 20:02

Добавьте свойство borderRadius: 100 в его контейнер, как и

<View style = {{borderRadius: 100}}>
  <Icon name = "trash-o" color = "white" style = {styles.icon} />
</View>


NOTE: borderRadius value is proportional to your container's size.

Другие вопросы по теме