reactNative牛X轮播

先上个图

Paste_Image.png

iOS 安卓都可以使用,目前只做了自定义原点位置

首先要感谢gitHub上的大神提供的组件
地址: https://github.com/leecade/react-native-swiper
首先导入 var Swiper = require('react-native-swiper');
<Swiper style={styles.wrapperTop}
showsButtons={false}
autoplay={true}
height={140}
paginationStyle={{
bottom: 10, left: null, right: 10,
}}
>
下面的内容就自己满足吧
还有其他功能,我会慢慢更新

API可以自行去查看

12月7日更新
什么都不说了.............
安卓既然不支持垂直轮播.
浪费了10几个小时研究更改源码---看API 最后发现不支持......

无奈手动写了个轮播,scorllView + 定时器 + 计算conOffsetY值.

废话不多说 直接贴代码

<View style={styles.container}>

            <ScrollView
                ref="scrollView"
                horizontal={false}
                showsHorizontalScrollIndicator={false}
                pagingEnabled={true}
                onMomentumScrollEnd={(scrollView)=>this.onAnimationEnd(scrollView)}
                onScrollBeginDrag={this.onScrollBeginDrag.bind(this)}
                onScrollEndDrag={this.onScrollEndDrag.bind(this)}
            >
                {this._renderAllImage()}
            </ScrollView>
        </View>

/**
* 演染图片
* @returns {Array}
* @private
*/
_renderAllImage() {
var imgArr = [];
var imgData = this.props.imgData;
for (var i in imgData) {
imgArr.push(
<Image
key={i}
source={{uri: imgData[i].icon}}
style={{width: width, height: 25}}
/>
)
}
return imgArr;
}

/**
* 开启定时器
* @private
*/
_startTimer() {

    var scrollView = this.refs.scrollView;
    var imgCount = this.props.imgData.length;

    this.interval = setInterval(() => {

        //记录当前正在活动的图片
        var activePage = 0;
        if ((this.state.currentPage + 1) >= imgCount) { //防止越界
            activePage = 0;
        } else {
            activePage = this.state.currentPage + 1;
        }

        this.setState({
            currentPage: activePage
        });

        //让ScrollView动起来
        var offSetY = activePage * 25;
        scrollView.scrollResponderScrollTo({x: 0, y: offSetY, animated: true});

    }, this.state.duration);
}

}