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容器解决了这个问题。

Answer 2

边框宽度加起来是您添加到的组件的大小。这会使您的图像大于容器组件的大小。要解决此问题，您可以将边框宽度添加到组件大小。

示例

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

Answer 3

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

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

Answer 4

值得一提的Android系统...

我必须专门设置local variables referenced from a lambda expression must be final or effectively final来使borderRadius生效。

resizeMode="cover"

Answer 5

这里给出的答案很好，但是根据我的经验，最好将可用屏幕高度的百分比用作图像的宽度和高度尺寸。这将对响应能力有很大帮助。这样做

import RN from 'react-native';

const SCREEN_HEIGHT = RN.Dimensions.get('window').height;

然后将以下内容用作尺寸样式，以获取美观，响应良好的圆形图像。

style={[
    //... your other previous styles
    {
       resizeMode: 'cover',
       width: SCREEN_HEIGHT * 0.15,
       height: SCREEN_HEIGHT * 0.15,
       borderRadius: (SCREEN_HEIGHT * 0.15)/2,
     }
]}

（* 0.15，即屏幕高度的15％）仅是我选择的样本尺寸，您可以使用更高或更低的值，具体取决于图像的大小。