React Native带边框的圆角图像

Question

我想创建一个带边框的圆角图像.如果我添加borderColor: 'green', borderWidth:1,边框仅在圆角图像的左上角可见.

<TouchableHighlight
          style={[styles.profileImgContainer, { borderColor: 'green', borderWidth:1 }]}
        >
    <Image source={{ uri:"https://www.t-nation.com/system/publishing/articles/10005529/original/6-Reasons-You-Should-Never-Open-a-Gym.png" }} style={styles.profileImg} />
</TouchableHighlight>

export default styles = StyleSheet.create({
  profileImgContainer: {
    marginLeft: 8,
    height: 80,
    width: 80,
    borderRadius: 40,
  },
  profileImg: {
    height: 80,
    width: 80,
    borderRadius: 40,
  },
});

Answer 1

overflow: 'hidden' for images container解决了这个问题.

Answer 2

使用以下样式，对我来说很有效。

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

Answer 3

值得一提的是Android...

我必须专门设置resizeMode="cover"borderRadius 才能生效。

<Image
  style={styles.image}
  source={source}
  resizeMode={"cover"} // <- needs to be "cover" for borderRadius to take effect on Android
/>

const styles = StyleSheet.create({
  image: {
    width: 150,
    height: 150,
    borderColor: 'red,
    borderWidth: 2,
    borderRadius: 75
  },
});

Answer 4

边框宽度总计等于您添加到的组件的大小。这使您的图像大于容器组件的大小。要解决此问题，您可以将边框宽度添加到组件尺寸中。

例

const styles = StyleSheet.create({
  profileImgContainer: {
    marginLeft: 8,
    height: 82,
    width: 82,
    borderRadius: 40,
    borderWidth: 1
  },
  profileImg: {
    height: 80,
    width: 80,
    borderRadius: 40,
  },
});