为什么 react-native border radius 在 iOS 而不是 Android 图像上起作用

Question

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

问题： android 上的 colored-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 上的样子（注意方形绿色边框）：

为什么会这样，我怎样才能得到我的边界半径？

Answer 1

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

Answer 2

如果我们想要视图圈，我们也通过设置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
    },

contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

Answer 3

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

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

Answer 4

尝试使用 img 样式 borderRadius: (width * 0.125)/2

Answer 5

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

为什么 react-native border radius 在 iOS 而不是 Android 图像上起作用

Why does react-native border radius work on iOS but not Android Image

react-native

react-native-android