图像样式相同，但Android上的边框半径不同

Question

代码

import { Image } from 'react-native';

<Image style={StyleSheet.flatten([styles.introPicSize, styles.introPicBorder])} source={require("../../assets/images/intro-pic.png")} />


const styles = StyleSheet.create({
    introPicSize: {
        height: responsiveWidth(160),
        width: responsiveWidth(160),
        resizeMode:'contain'
    },
    introPicBorder: {
        borderWidth:8,
        borderRadius:100,
        borderColor:"#BDB9CD",
        overflow:'hidden'
    }
}

期望边框半径为100（圆形）的图像（在Android和IOS上）

结果对于IOS来说很好

但是对于Android来说，它是一个正方形而不是圆形（它将borderRadius读取为0而不是100

查看下图

The image

Answer 1

borderRadius不适用于<Image />中的Android。您可以在这里看到它：https://github.com/facebook/react-native/issues/8885

解决方案是将其与View包裹在一起并为其应用borderRadius。

<View style = {{flex: 1, borderRadius: 100}} >
    <Image style={ {width: 300, height: 100 } } source={{ uri: 'https://placekitten.com/300/100' }}> </Image> 
</View>