overflow: 'hidden' for images容器解决了这个问题。

使用下面的造型，这是我的工作。

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

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

边框宽度与添加到的组件的大小相加。这会使图像大于容器组件的大小。若要解决此问题，可以将边框宽度添加到组件大小中。

• • 示例**

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

如果你想显示圆角的图像，并且使用resizeMode={'contain'}来显示完整的图像，那么将图像包裹在视图中，然后给视图给予边界半径。

<View style={styles.carImageHolder}>
                    <Image
                      source={{
                        uri: each?.usercar_details?.car_model?.sized_photo,
                      }}
                      resizeMode={'contain'}
                      style={styles.carImage}
                    />
                  </View>

以及样式部分

carImage: {
    width: '100%',
    aspectRatio: 1 / 1,
  },
  carImageHolder: {
    width: '28.3%',
    aspectRatio: 1 / 1,
    backgroundColor: '#d8d8d8',
    borderRadius: 25,
    overflow: 'hidden',
  },

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

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%的屏幕高度）只是我选择的样本尺寸，你可以使用更高或更低，这取决于你想要你的图像有多大。