Тот же стиль для изображения, но другой радиус границы на 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

. Проверьте изображение ниже

Изображение

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>