React native 为什么react native border radius可以在iOS上工作，而不能在Android图像上工作

创建了一个列表组件，它有一个图像、一些文本和一个按钮。 图像上有边框半径和边框颜色

问题: android上的彩色边框半径无法识别，但在iOS上效果很好

代码如下：

名单：

import React，{useState}来自“React”；
进口{
看法
文本，
形象,，
样式表，
情态动词
平面列表，
尺寸，
可触摸不透明度，
无反馈可触摸
}从“反应本机”；
从'react native Svg'导入{Svg，Path，G，Line}；
const{width}=Dimensions.get（'window'）；
常量块列表=（道具）=>{
const onPress=（名称）=>{
警报（“解除阻止”+名称）；
};
返回(
(
{item.name}
onPress（item.name）}style={styles.btn}>
解除封锁
)}
/>
);
};
const styles=StyleSheet.create({
itemContainer：{
flexDirection:'行'，
宽度：宽度*0.95，
背景颜色：“#fff”，
边缘水平：宽度*0.025，
边缘底部：宽度*0.02，
边界半径：18，
justifyContent:'之间的空间'，
对齐项目：“居中”，
填充垂直：宽度*0.02，
阴影颜色：'#333'，
阴影偏移：{
宽度：3，
身高：3
},
阴影不透明度：0.5，
阴影半径：3，
立面图：5
},
img：{
边界半径：50，
边界宽度：2，
边框颜色：'#219F75'，
高度：宽度*0.125，
宽度：宽度*0.125，
边缘水平：宽度*0.05
},
btn:{
边界半径：11，
背景颜色：“#219F75”，
填充：宽度*0.0275
},
左侧：{
flexDirection:'行'，
对齐项目：“中心”
},
右侧：{
边缘光：宽度*0.05
}
});
导出默认阻止列表；

下面是它应该是什么样子（在iOS上正常工作）：

以下是android上的外观（请注意方形绿色边框）：

---

为什么会发生这种情况？如何获取边界半径？

尝试img样式下的

borderRadius:width*0.125

。

如果我们想要视图圆，我们还可以通过将

borderRadius

设置为视图高度（宽度）的一半来实现

包含：均匀缩放图像（保持图像的纵横比），使图像的两个尺寸（宽度和高度）等于或小于视图的相应尺寸（减去填充）

---

当使用android的低分辨率设备时，您可以动态设置图像宽度高度，但边界半径静态值有时图像边界半径大于图像宽度，这就是为什么会出现这种情况

---

请动态设置所有属性。如果使用一半宽度的图像边框，效果会更好

---

borderRadius：（宽度*0.125）/2

您可以尝试将resizeMode更改为“cover”

您可以尝试添加溢出：“hidden”吗？刚刚添加，没有changes@Jim你能用一张带图片的卡片和我分享一份世博会点心吗？@Jim，当我删除resizeMode时，它工作正常，没有变化。同样没有变化。我认为这与价值无关borderRadius@Jim，尝试设置使用应计数字的高度和宽度进行测试。当通过将边界半径设置为视图高度的一半来创建圆形视图时。ios显示的大小可能恰好相等。您可以查看此回答链接[有关某些详细信息，borderRadius值更改不会影响所需的输出，因为您设置了图像大小调整模式。该模式具有缩放功能。尝试在视图中创建图像请阅读注释：borderRadius值更改不会影响所需的结果

import React, { useState } from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    Modal,
    FlatList,
    Dimensions,
    TouchableOpacity,
    TouchableWithoutFeedback
} from 'react-native';
import { Svg, Path, G, Line } from 'react-native-svg';
const { width } = Dimensions.get('window');

const BlockList = (props) => {
    const onPress = (name) => {
        alert('Unblocking ' + name);
    };
    return (
        <FlatList
            style={styles.container}
            data={props.data}
            renderItem={({ item, index }) => (
                <View style={styles.itemContainer}>
                    <View style={styles.leftSide}>
                        <Image source={item.img} style={styles.img} resizeMode={'contain'} />
                        <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#454A66' }}>{item.name}</Text>
                    </View>
                    <View style={styles.rightSide}>
                        <TouchableOpacity onPress={() => onPress(item.name)} style={styles.btn}>
                            <Text style={{ fontWeight: 'bold', color: '#fff' }}>Unblock</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )}
        />
    );
};

const styles = StyleSheet.create({
    itemContainer: {
        flexDirection: 'row',
        width: width * 0.95,
        backgroundColor: '#fff',
        marginHorizontal: width * 0.025,
        marginBottom: width * 0.02,
        borderRadius: 18,
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: width * 0.02,
        shadowColor: '#333',
        shadowOffset: {
            width: 3,
            height: 3
        },
        shadowOpacity: 0.5,
        shadowRadius: 3,
        elevation: 5
    },
    img: {
        borderRadius: 50,
        borderWidth: 2,
        borderColor: '#219F75',
        height: width * 0.125,
        width: width * 0.125,
        marginHorizontal: width * 0.05
    },
    btn: {
        borderRadius: 11,
        backgroundColor: '#219F75',
        padding: width * 0.0275
    },
    leftSide: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    rightSide: {
        marginRight: width * 0.05
    }
});

export default BlockList;

<View
   style={{
       borderWidth:1,
       borderColor:'rgba(0,0,0,0.2)',
       alignItems:'center',
       justifyContent:'center',
       width:100,
       height:100,
       backgroundColor:'#fff',
       borderRadius:50,
     }}
 />

<View style={styles.leftSide}>
 <Image source={item.img} style={styles.img}/>
   <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#454A66' }}>{item.name}</Text>
 </View>

img: {
        borderRadius: width * 0.125*0.5,
        borderWidth: 2,
        borderColor: '#219F75',
        height: width * 0.125,
        width: width * 0.125,
        marginHorizontal: width * 0.05
    },