在 Android 上反应原生圆形图像答案

【问题标题】：React Native Circle Image on Android在 Android 上反应原生圆形图像
【发布时间】：2017-08-11 11:05:36
【问题描述】：

我只是想在 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 图像。您期望的方法似乎适用于 jpg 和 png，但不适用于 GIFS！

【问题讨论】：

你能展示一下你的图片目前是如何显示的吗？

标签： android image reactjs react-native

【解决方案1】：

您不需要有一个环绕视图来实现这一点，只需将borderRadius 设置为图像大小的一半就可以了。你想要的任何其他样式都可以直接应用到Image视图

你可以在这里看到一个例子https://snack.expo.io/rJI4DzoDW

【讨论】：

【解决方案2】：

使用这种风格；

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

【讨论】：