解决轮播(swiper安卓不兼容竖向轮播)


import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image, ScrollView, ImageBackground,Platform, BackHandler, FlatList} from 'react-native';
import { connect } from 'react-redux';
import { IsIos, Foundation } from '../common';
class CommonBanner extends React.Component {

    static navigationOptions = {
        title: '',     
    };

    constructor(props) {
        super(props);
        this.state={
            sliderIndex: 0,
            maxSlider: this.props.maxSlider,
            bannerList:this.props.bannerList,
            
        }
    }

     setRef = (c) => {
        this.listRef = c;
      }
      
      scrollToIndex = (index, animated) => {
        this.listRef && this.listRef.scrollToIndex({ index, animated })
      }
      componentWillReceiveProps(nextProps){
          if(this.props.bannerList != nextProps.bannerList || this.props.maxSlider != nextProps.maxSlider){
              this.setState({
                bannerList:nextProps.bannerList,
                maxSlider: nextProps.maxSlider
              })
          }
      }

      intervalId = -1;
    componentDidMount() {
        this.setTimeOutRepeat()
    }

    isUnMounted = false;
    setTimeOutRepeat = () => {
        setTimeout(() => {
            const { sliderIndex, maxSlider } = this.state
            let nextIndex = 0
        
            if (sliderIndex < maxSlider - 3) {
              nextIndex = sliderIndex + 1
            }else{
                nextIndex = 0;
            }
        
            this.scrollToIndex(nextIndex, true)
            this.setState({sliderIndex: nextIndex})
            if(!this.isUnMounted){
                this.setTimeOutRepeat();
            }
        },2000);
    }

    componentWillUnmount(){
        this.isUnMounted = true;
        if (this.intervalId != -1){
            clearInterval(this.intervalId)
        }
    }

    render() {
        return (
            
                 index.toString()}
                style={{height:IsIos? 140 : 150,paddingBottom:5}}
                renderItem={({item, i}) => (
                    
                         
                            
                                {item.itemName}
                                {item.targetPageUrl} 
                                {item.targetPageTitle}
                            
                    
                )}
            />
            
        );
    }
}

select = (state) => {
    return state.user
}

export default connect(select)(CommonBanner);

const styles = StyleSheet.create({
    item_container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        alignItems:'center'
    },
    two_line: {
        width:'100%'-20,
        marginLeft:10,
        marginRight:10
    },
    small_icon:{
        width:30,
        height:30
    }
});

你可能感兴趣的:(解决轮播(swiper安卓不兼容竖向轮播))