react-native - 带有边框的 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'图像容器解决了这个问题。