ReactNative实现轮播图

先看App运行效果:

轮播图.gif

react-native中有专门实现轮播图的模块Swiper,和引入React的方式一样,通过import方式引入:

import Swiper from 'react-native-swiper';

轮播图上方的标题'狗狗的家',用Text控件实现.由于render方法中不能同时返回多个控件,所以需要将Swiper和Text通过一个View来封装.

render() {
        let H = 200;
        if (this.state.isShow) {
            return(
                <View style={{height: H, alignItems:'center', backgroundColor:'blue'}}>

                    <Swiper autoplay = {true} height = {H} showsPagination = {true} dotColor="white"
                            activeDotColor='yellow' horizontal={true}>
                        {
                            this.state.items.map((item, index) => {
                                console.log(item, index)
                                //cover: 等比例放大; center:不变; contain:不变; stretch:填充;
                                return (<Image style={{height: H, width:ScreenWidth}} key = {index} resizeMode='cover' source={{uri: item}}/>)
                            })
                        }

                    </Swiper>
                    <Text style={styles.title}>
                        狗狗的家
                    </Text>
                </View>
            );
        }else {
            return(
                <View style={{height:H, width: ScreenWidth, backgroundColor:'green'}}/>
            );
        }
    }

轮播图中的狗,猫,熊三张图片都是通过网络异步加载,通过添加isShow属性来对网络加载结果进行不同渲染,请求成功后,才进行Swiper控件的渲染.

constructor(props){
        super(props);
        this.state = {
            isShow: false,
            items:[]
        }
    }

其中items用来存放图片的地址.
在componentDidMount方法中添加图片地址,并通过setState方法,重新调用控件的render方法:

componentDidMount() {
        var item;
        for (let i = 0; i < 3; i++){
            switch (i){
                case 0:{
                    item = 'http://blogdailyherald.com/wp-content/uploads/2013/04/382065_560557460633306_930109857_n.jpg';

                    break;
                }
                case 1:{
                    item = 'http://img0.pclady.com.cn/pclady/pet/choice/cat/1701/6.jpg';
                    break;
                }
                default:{
                    item = 'https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/3812b31bb051f819dc048662dbb44aed2e73e7f1.jpg';
                    break;
                }
            }
            this.state.items.push(item);

        }
        console.log(this.state.items + '111');
        this.setState({
            isShow: true,
            items: this.state.items
        })
    }

详细请参看Demo

喜欢和关注都是对我的支持和鼓励~