Создание круга вокруг иконки мусора в Реакции родных?

Question

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

Теперь моя иконка вот так.

Как создать такой круг

<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>

Answer 1

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

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

---

ПРИМЕЧАНИЕ: borderRadius значение пропорционально размеру вашего контейнера.

Answer 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
}