react native swiper实现轮播图

安装

npm install react-native-swiper --save

引入使用

import React from 'react';
import {
    StyleSheet,
    View,
    Text,Image,Dimensions
} from 'react-native';
import Swiper from 'react-native-swiper'

const { width } = Dimensions.get('window');
class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            swiperShow:false,
            titleList: [],
            imglist:[
                {id:1,uri:require('../../assets/bg1.png')},
                {id:2,uri:require('../../assets/bg2.png')},
                {id:3,uri:require('../../assets/bg3.png')}
            ]
        };
    }

    componentDidMount() {

    }

    componentWillUnmount() {

    }


    render() {
        let { imglist } = this.state
        return (
            <>
            <View style={styles.container}>
                <Swiper style={styles.wrapper} height={200} horizontal={true} autoplay={ true } autoplayTimeout={5}>
                    
                    {
                        imglist.map((item,i) =>{
                            return (
                                <View style={styles.slide1} key={i}>
                                    <Image resizeMode='stretch' style={styles.image} source={ item.uri } />
                                </View>
                            )
                        })
                    }
                </Swiper>
            </View>
            <View><Text>首页</Text>
            </View>
            </>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        height:200
    },

    wrapper: {
    },

    slide: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: 'transparent'
    },

    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffff'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },

    image: {
        width,
        height:200

    }
});

export default Home;