swiper实现轮播图

最新推荐文章于 2025-06-17 22:41:20 发布

FreeBSFree

最新推荐文章于 2025-06-17 22:41:20 发布

阅读量513

点赞数

CC 4.0 BY-SA版权

分类专栏： Rect-Native

本文链接：https://blog.youkuaiyun.com/qq_17190231/article/details/88293662

Rect-Native 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何利用Swiper JavaScript库来实现功能丰富的轮播图效果，包括图片切换、自动播放、触控滑动等特性。通过实例代码和配置选项解析，帮助开发者快速掌握Swiper的使用。

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

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    Image,
    View,
    ScrollView,
} from 'react-native';

var Swiper = require('react-native-swiper');
var screenWidth = require('Dimensions').get('window').width;
var data = require('./lunboData.json');

export default class App extends Component{
    render() {
        return(
            <View style={{flex: 1, backgroundColor:'gray'}}>

                <View>
                    <ScrollView style={{backgroundColor:'red',}}>
                        <Swiper style={styles.swiperStyle}
                                paginationStyle={{bottom:10}}
                                dot={<View style={{width:8, height: 8, borderRadius:4, backgroundColor:'white', marginLeft:3, marginRight:3}}></View>}
                                activeDot={<View style={{width:8, height: 8, borderRadius:4, backgroundColor:'orange', marginLeft:3, marginRight:3}}></View>}
                                autoplay={true}
                        >
                            {this.renderAllImgs()}
                        </Swiper>
                    </ScrollView>
                </View>
            </View>

        );
    }

    //所有图片
    renderAllImgs(){
        var arrImgs = data.data;
        var arrReturn = [];
        for (var i = 0; i < arrImgs.length; i++){
            arrReturn.push(
                <Image source={{uri:arrImgs[i].img}} style={{flex:1,}} key={i}/>
            );
        }
        return arrReturn;
    }
}

const styles = StyleSheet.create({
    swiperStyle:{
        height:200,
        backgroundColor:'white',
    },
});