Kode

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'
    }
}

Yang diharapkan adalah memiliki gambar dengan radius batas 100 (lingkaran) (Di Android & iOS)

Hasilnya bagus untuk IOS

Tetapi untuk Android , itu persegi bukan lingkaran (terbaca borderRadius sebagai 0 bukan 100

Periksa gambar di bawah ini

Foto

0
Ahmed Mohsen 4 Maret 2020, 11:43

1 menjawab

Jawaban Terbaik

borderRadius tidak berfungsi dengan <Image /> di Android. Anda dapat melihatnya di sini: https://github.com/facebook/react-native/ masalah/8885

Solusinya adalah membungkusnya dengan View dan menerapkan borderRadius untuk itu.

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

0
Tan Dat 4 Maret 2020, 08:48