react-native-swiper Android不显示

最新推荐文章于 2025-03-27 14:20:02 发布

feipengwang6666

最新推荐文章于 2025-03-27 14:20:02 发布

阅读量744

点赞数 1

分类专栏： RN 文章标签： react native

本文链接：https://blog.youkuaiyun.com/fepengwang/article/details/100124278

版权

RN 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了在React Native项目中使用react-native-swiper遇到的白屏问题及解决方法，通过调整Swiper组件属性removeClippedSubviews并设置合适的样式，成功解决了白屏现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中引入了react-native-swiper，发现不能显示。

问题原因：

1.放到了（FlatList , SectionList,ListView,ScrollView 等）组件中

2.swiper的下面放有ScrollView或者ListView等滑动列表

网上解决办法：

1.添加延时，之后加载（尝试以后，发现并不能解决问题）

我的解决方式：

<View style={HomePageScreenStyle.contentContainer}>
    <Swiper
        style={HomePageScreenStyle.contentContainer}
        showsButtons={false}
        removeClippedSubviews={false} //这个很主要啊，解决白屏问题
        autoplay={true}
        horizontal ={true}
        paginationStyle={HomePageScreenStyle.paginationStyle}
        dotStyle={HomePageScreenStyle.dotStyle}
        activeDotStyle={HomePageScreenStyle.activeDotStyle}>
        <Image source={Images.teacher.mainlist_main_slideshow_bg} style={HomePageScreenStyle.backgroundImage} />
        <Image source={Images.teacher.mainlist_main_slideshow_bg_notenglish} style={HomePageScreenStyle.backgroundImage} />
    </Swiper>
</View>

注意：是给最Swiper外嵌套一层，并且给上内容相同的宽高。此方法在我的项目中有效果，如有其他问题，欢迎讨论