图像样式相同，但 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 不适用于 Android 中的 <Image />。你可以在这里看到它：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>

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

Same style for image , but different border radius on Android

image

reactjs

react-native

react-native-android

react-native-ios