基于react-native-swiper 封装的bannerView

来源：互联网发布：矩阵乘法编辑：程序博客网时间：2024/06/11 19:32

使用

   <BannerView                defaultImage={constants.default_img}                images={this.state.bannerData}                bannerHeight={150}                itemOnPress={(i) => {                    ToastAndroid.show("点击了item===>" + i, ToastAndroid.SHORT)                }}            />

代码

import React, {Component} from 'react';import {    View,    Image,    Text,    TouchableOpacity} from 'react-native';import PropType from "prop-types";import Swiper from "react-native-swiper"/** * * Created by yunpeng on * Desc: */export default class BannerView extends Component {    //设置参数类型    static propTypes = {        //图片地址        images: PropType.PropTypes.array,        //默认图片        defaultImage: PropType.PropTypes.string.isRequired,        //标题文字        titles: PropType.PropTypes.array,        selectDotColor: PropType.PropTypes.string,        unSelectDotColor: PropType.PropTypes.string,        itemOnPress: PropType.PropTypes.func,        bannerHeight: PropType.PropTypes.number,    };    static defaultProps = {        selectDotColor: '#007aff',        unSelectDotColor: 'rgba(0,0,0,.2)',        bannerHeight: 200,    };    render() {        return (            <View style={{height: this.props.bannerHeight}}>                {this._renderBanner()}            </View>        )    }    /**     * 加载banner图片相关     * @returns {XML}     * @private     */    _renderBanner() {        if (this.props.images && this.props.images.length > 0) {            let images = [];            for (let i = 0; i < this.props.images.length; i++) {                images.push(                    this._bannerTitle(i)                )            }            return <Swiper                //设置选中点样式                activeDot={                    <View style={{                        backgroundColor: this.props.selectDotColor,                        width: 8,                        height: 8,                        borderRadius: 4,                        marginLeft: 3,                        marginRight: 3,                        marginTop: 3,                        marginBottom: 3,                    }}/>                }                //未选中点样式                dot={<View style={{                    backgroundColor: this.props.unSelectDotColor,                    width: 8,                    height: 8,                    borderRadius: 4,                    marginLeft: 3,                    marginRight: 3,                    marginTop: 3,                    marginBottom: 3,                }}/>}                //是否展示原点                showsPagination={true}                index={0}                horizontal={true}                paginationStyle={{bottom: 10}}                showsButtons={false}                autoplayDirection={true}                //是否无限轮询                loop={false}                autoplay={false}>                {images}            </Swiper>        } else {            return <Image                source={{uri: this.props.defaultImage}}                style={{flex: 1}}/>        }    }    /**     * 加载banner标题     * @private     */    _bannerTitle(i) {        if (this.props.titles && this.props.titles.length > 0) {            return <TouchableOpacity activeOpacity={0.9} onPress={this.props.itemOnPress.bind(this,i)} key={i} style={{height: this.props.bannerHeight}}>                <View >                    <Image                        source={{uri: this.props.images[i]}}                        style={{height: this.props.bannerHeight}}/>                    <View style={{                        position: "absolute", justifyContent: 'space-between',                        alignItems: 'center', bottom: 10, right: 0, left: 0,                    }}>                        <Text>{this.props.titles[i]}</Text>                    </View>                </View>            </TouchableOpacity>        } else {            return <TouchableOpacity activeOpacity={0.9} onPress={this.props.itemOnPress.bind(this,i)} key={i} style={{height: this.props.bannerHeight}}>                     <Image                       source={{uri: this.props.images[i]}}                       style={{height: this.props.bannerHeight}}/>                 </TouchableOpacity>        }    }}

阅读全文

0 0