swiper实现轮播图

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',
    },
});