Question

我只是想在Android上使用react-native应用程序拍摄方形图像并将其包含在一个圆圈内。基本上是圆形图像。

<View style={mainStyle.profileImageContainer}>
            <Image
              style={mainStyle.profileImage}
              source={{uri: CONFIG.media_url+this.props.image}} 
              resizeMode="cover"
            />
</View>

和样式：

profileImageContainer: {
    translateY: -43,
    alignSelf: 'center',
},
profileImage: {
    resizeMode: 'cover',
    height: 86,
    width: 86,
    borderWidth: 2,
    borderRadius: 75,
    overlayColor: CREAM,
},

但是在Android上远程循环播放它的唯一方法是添加“overlayColor”，但我需要它是透明的，因此背后的设计是可见的。透明的属性不起作用。

有没有人有任何想法如何实现这一目标？我错过了某种简单的财产吗？

编辑：感谢Dhruv Parmar的回答，我意识到问题是因为我使用的是GIF图像。您期望的方法似乎可以正常使用jpgs和pngs，但不适用于GIFS！

Answer 1

你不需要有一个包装视图来实现这一点，只需使用设置为图像大小一半的borderRadius即可。您想要的任何其他样式都可以直接应用于Image视图

您可以在此处查看示例https://snack.expo.io/rJI4DzoDW

Answer 2

使用此样式；

image: {
    width: 150,
    height: 150,
    borderRadius: 150 / 2,
    overflow: "hidden",
    borderWidth: 3,
    borderColor: "red"
  }

在Android上反应原生圆图像

2 个答案: