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

Question

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

问题:
android 上的彩色边框半径未被识别，但在 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

如果我们想要视野圈，我们也可以通过设置borderRadius来实现。等于 View 高度(宽度)的一半。

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

在您的情况下，您的图像设置了 调整大小模式 .所以它没有显示出你想要的效果。为此尝试在 View 中移动它或使用 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).