react-native中图片轮播的使用

最新推荐文章于 2025-07-09 15:04:44 发布

神奇的小猴子

最新推荐文章于 2025-07-09 15:04:44 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_30053399/article/details/52579718

react 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在React Native项目中实现图片轮播功能，通过使用react-native-swiper第三方组件，详细阐述了安装、导入及配置关键属性的步骤，包括水平轮播、循环播放、自动播放等特性。

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

项目当中，图片轮播可以说是，家常便饭。所以，这个一定要会用。废话不多说了，直接进入主题。
我们用一下第三方组件（react-native-swiper），这个组件相对来讲，是比较成熟，稳定的。先看效果：
这里写图片描述
其实，这个效果也就几行代码的事情！

 <Swiper style={styles.wrapper} showsButtons={true} autoplay={true} autoplayTimeout={1.5}>
                <View style={styles.slide1}>
                    <Text style={styles.text}>Hello Swiper</Text>
                </View>
                <View style={styles.slide2}>
                    <Text style={styles.text}>Beautiful</Text>
                </View>
                <View style={styles.slide3}>
                    <Text style={styles.text}>And simple</Text>
                </View>
            </Swiper>
var styles = StyleSheet.create({
    wrapper: {},
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }
});

实现步骤：
1.安装第三方的js代码；
$ npm i react-native-swiper –save

2.导入第三方组件；
import Swiper from ‘react-native-swiper’;

3.写我们自己的效果

重点属性：
1.horizontal：水平方向轮播，默认true;
2.loop:是否循环，默认true;
3.index:第一次加载哪一个页面，默认是0；
4.showsButtons：是否显示向左向右只是标志，默认false;
5.autoplay：是否自动播放，默认false;
6.loadMinimal：是否进行预加载；loadMinimalSize：预加载的大小；
7.autoplayTimeout：自动播放时，时间间隔；
8.autoplayDirection：自动播放的方向；
9.nextButton，prevButton可以改写向左，向右的指示箭头；
10.title、renderPagination目前只支持ＩＯＳ，title就是滑动页面下面的名字，renderPagination就是页码；
11.dot标志滑动的白点；
12.activeDot选中状态标志出来的效果；