图像上的边框半径不起作用（Android）

Question

我正在尝试获取带有圆角的图像，以便可以说它变成圆形图像。我正在使用 vue-nativescript。

html:

<template>
    <Page>
        <FlexboxLayout flexDirection="column" justifyContent="space-around">
        <StackLayout class="stack-layout-logo">
            <Image
                src="~/assets/images/passer.png"
                stretch="aspectFit"
                class="image-logo"
            ></Image>
        </StackLayout>
        <StackLayout class="stack-layout-logo">
            <Image
                src="~/assets/images/passer.png"
                stretch="aspectFill"
                class="image-logo"
            ></Image>
        </StackLayout>
        <StackLayout class="stack-layout-logo">
            <Image src="~/assets/images/passer.png" stretch="none" class="image-logo"></Image>
        </StackLayout>
        </FlexboxLayout>
    </Page>
</template>

css:

.stack-layout-logo {
    background-color: lime;
    height: 25%;
}

.image-logo {
    background-color: grey;
    border-radius: 50% 50% 50% 50%;
    height: 100%;
}

我尝试了不同的伸展运动，但似乎没有一个能达到我想要的效果。

Answer 1

简单的bordrRadius 不适用于Android，您必须提供所有4 个角的边框半径，即topRight、topLeft、bottomRight 和bottomLeft

const width = 20 // whatever is width of your image
const imgStyle = {
  borderRadius: width / 2,
  borderBottomLeftRadius: width / 2,
  borderBottomRightRadius: width / 2,
  borderTopRightRadius: width / 2,
  borderTopLeftRadius: width / 2
}

Answer 2

尝试将stretch = "aspectFit" 替换为stretch = "aspectFill" 或stretch = "none"。我以前也经历过同样的事情

Answer 3

根据doc，你应该这样使用：

.image-logo {
    background-color: grey;
    border-radius: 20;
    height: 100%;
}

如果你想圆一个特定的角落，你可以试试这个：

https://reactnative.dev/docs/view-style-props#borderbottomleftradius

不错的图片顺便说一句。