为什么 react-native 边框半径适用于 iOS 而不是 Android Image答案

【问题标题】：Why does react-native border radius work on iOS but not Android Image为什么 react-native 边框半径适用于 iOS 而不是 Android Image
【发布时间】：2021-12-09 08:29:13
【问题描述】：

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

问题： android 上的 coloured-border-radius 无法识别，但在 iOS 上可以正常工作...

代码如下：

列表：

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;

这是它的外观（在 iOS 上正常工作）：

这是在 android 上的样子（注意方形绿色边框）：

为什么会发生这种情况，我怎样才能得到我的边界半径？

【问题讨论】：

你可以尝试添加溢出：'隐藏'？
刚刚做了，没有变化
@Jim 你能分享一张只有一张带图像的卡片的博览会小吃，以便我检查吗？
snack.expo.io/Sk0GLqbg8
@Jim，当我删除 resizeMode 时，它可以工作

标签： react-native react-native-android

【解决方案1】：

如果我们想要视图圆，我们也可以通过设置borderRadius等于视图高度（宽度）的一半来实现。

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

在您的情况下，您的图像设置了 resizeMode。所以它没有显示出你想要的效果。为此尝试在视图中移动它或使用resizeMode:stretch； resizeMode:cover 或删除它。

<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
    },

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

【讨论】：

试过了。再次没有变化。我认为这与borderRadius的值无关
@Jim，尝试设置使用应计数字的高度和宽度进行测试。当通过将边框半径设置为视图高度的一半来制作圆形视图。 ios 显示也许它恰好相等。
你可以看到这个答案链接[stackoverflow.com/a/35580676/5705408]了解一些细节
borderRadius 值的变化不会影响预期的结果
那是因为您设置了图像调整大小模式。它有规模。尝试在视图中制作图像

【解决方案2】：

在 img 样式下尝试borderRadius:width * 0.125。

【讨论】：

试过了，没有变化

【解决方案3】：

当使用较低分辨率的android设备时，您动态设置图像宽度高度但边界半径静态值有时图像borderRedius大于图像宽度，这就是它发生的原因。

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

【讨论】：

请阅读 cmets：borderRadius 值变化不会影响预期结果

【解决方案4】：

试试 img 风格 边框半径：（宽度 * 0.125）/2

【讨论】：

【解决方案5】：

你可以尝试将resizeMode改为“cover”

【讨论】：