react-native 轮播图

来源：互联网发布：微商裂变软件编辑：程序博客网时间：2024/06/04 05:19

//插件安装

$ npm install react-native-swiper--save

$ npm i react-timer-mixin--save

我项目的源码：

注：这个是我的轮播图板块，this.props.item为我调用该模板传递过来的数据

/**

* Created by YangZe on 2017/5/17.

*/

import React, {Component} from 'react';

import {

    StyleSheet,

    View,

    Text,

    Image,

    TouchableHighlight

} from 'react-native';

import Swiper  from 'react-native-swiper'  //引入第三方插件

export default class slideshow extends Component {

    render() {

        return (

            <Swiper height={200}

                    paginationStyle={{bottom: 10, left: 270}}

                    autoplay={true}

                    autoplayTimeout={5}

                    dot={

                    <View style={{

                        width: 4,

                        height: 4,

                        backgroundColor: 'white',

                        borderRadius: 4,

                        marginLeft: 3,

                        marginRight: 3

}}>

                    </View>

}

                    activeDot={

                    <View style={{

                        width: 4,

                        height: 4,

                        backgroundColor: 'red',

                        borderRadius: 4,

                        marginLeft: 3,

                        marginRight: 3

}}>

                    </View>

}

>

                {/*{this.renderImg()}*/}

                {this.props.item.map((x) => {

                    return (

                        <View key={x.home_image} style={{flex: 1}}>

                            <TouchableHighlight style={{flex: 1}}

                                                onPress={() => {

                                                    this._onSlideShowClick(x)

}

                                                }>    //图片点击事件

                                <Image

                                    style={{flex: 1}}

                                    source={{uri: x.home_image}}

>

                                    <View style={{

                                        backgroundColor: 'rgba(0,0,0,0.4)',

                                        position: 'absolute',

                                        bottom: 0,

                                        flex: 1,

                                        flexDirection: 'row'

}}>

                                        <Text style={{padding: 5, color: '#fff', flex: 1}} numberOfLines={1}>

                                            {x.title}

                                        </Text>

                                    </View>

                                </Image>

</TouchableHighlight>

                        </View>

)

})

}

            </Swiper>

);

}

    _onSlideShowClick(x) {

        console.log(x.title)

}

//博主的方法

    // renderImg(){

    //    var imageViews=[];

    //    for(var i=0;i<this.props.item.length;i++){

    //        imageViews.push(

//

    //            <Image

    //                key={i}

    //                style={{flex:1}}

    //                source={{uri:this.images[i]}}

    //            >

    //                <View style={{backgroundColor:'rgba(0,0,0,0.4)',position:'absolute',bottom:0,flex:1,flexDirection:'row'}}>

    //                    <Text style={{padding:5,color:'#fff',flex:1}} numberOfLines={1}>

    //                        {this.props.item[i].title}

    //                    </Text>

    //                </View>

    //            </Image>

    //        );

    //    }

    //    return imageViews;

    // }

}

阅读全文

0 0