Javascript borderRadius在图像转盘中的每次图像加载期间都不工作

我已经创建了一个水平图像旋转木马，并希望旋转木马的所有角落都是圆形的

borderRadius

和

overflow:“hidden”

似乎适用于图像，但当加载下一个图像时，在加载之前会显示角点。旋转木马设置为每2秒加载一次循环中的连续图像

以下是渲染的部分：

render() {
        const { selectedIndex } = this.state;
        return (
            <View
                style={{ height: '100%', width: '100%', borderRadius: 20 }}
                onLayout={event => {
                    this.setState({
                        carouselWidth: event.nativeEvent.layout.width
                    })
                }}
            >
                <ScrollView
                    horizontal
                    pagingEnabled
                    onMomentumScrollEnd={this.setSelectedIndex}
                    ref={this.scrollRef}
                    //contentContainerStyle={{ borderRadius: 20 }}
                >
                    {images.map(image => (

                        <Image
                            key={image}
                            source={image}
                            style={styles.backgroundImage}
                        />
                    ))}
                </ScrollView>
            </View >
        );
    }
}

const styles = StyleSheet.create({
    backgroundImage: {
        height: '100%',
        width: DEVICE_WIDTH,
        resizeMode: "stretch",
        borderRadius: 20,
        overflow: 'hidden',
    }
});

render（）{
const{selectedIndex}=this.state；
返回(
{
这是我的国家({
转盘宽度：event.nativeEvent.layout.width
})
}}
>
{images.map（image=>(
))}
);
}
}
const styles=StyleSheet.create({
背景图片：{
高度：“100%”，
宽度：设备宽度，
resizeMode：“拉伸”，
边界半径：20，
溢出：“隐藏”，
}
});