React native 使用边框对本机圆形图像进行反应

我想创建一个带边框的圆形图像。如果我添加

borderColor:“绿色”，borderWidth:1

，则边框仅在圆角图像的左上部分可见

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

导出默认样式=StyleSheet.create({
profileImgContainer：{
边缘左：8，
身高：80，
宽度：80，
边界半径：40，
},
简介：{
身高：80，
宽度：80，
边界半径：40，
},
});

溢出：图像容器的“隐藏”解决了此问题。

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

示例

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

---

使用下面的样式，这是我的工作

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

---

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

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%）只是我选择的示例尺寸，您可以使用更高或更低的尺寸，具体取决于您希望图像的大小。

值得一提的是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
  },
});

---

这只是一个小例子来说明我所描述的内容。我知道您已经添加了borderWidth。对不起，我知道您的意思，但当我增加
borderWidth
时，只有可见的边框部分更大，底部仍然没有边框。