react native自动轮播图

最新推荐文章于 2024-08-20 09:07:09 发布

xiongtm

最新推荐文章于 2024-08-20 09:07:09 发布

阅读量1.7k

点赞数

文章标签： react native

本文链接：https://blog.csdn.net/Xiongtm/article/details/70209504

版权

react native最近火的不行不行的，更新速度也非常快，基本是每月必更新，目前最新版本为0.43.

公司最近在使用基于react native的原生应用开发，当然图片轮播图是必不可少的。

在制作图片轮播图时遇到以下几个问题：

1、图片右下方的indicator小圆点跟随图片滑动的问题。

此时如果采用render的方法是不可取的，因为这样每滑动一张图片，indicator会被render几百上千次。因此应该采用ref的setNativeProps，即在不render的情况下修改布局。核心代码如下：

 this.ref.indecator.setNativeProps(
                {style: {right: this.ref.rightX - this.nextPagePixel * 14}}
            )

2、图片使用setInterval自动轮播问题

核心代码如下：

startScroll() {

        if(this.scrollTimer){
            clearInterval(this.scrollTimer);
        }
        this.isAutoScroll = true;
        this.scrollTimer = setInterval(()=> {
            this.scrollView.scrollTo({x: this.nextPage * mWidth}, true);
            this.nextPage++;
            if (this.nextPage >= this.props.bannerList.length) {
                this.nextPage = 0;
            }
        }, 3000);

    }

1）startScroll方法在组件装载完成时首次调用

componentDidMount() {
        this.startScroll();
    }

2）在组件卸载时需要清除定时器，否则会出现很多意想不到的问题

componentWillUnmount() {
        clearInterval(this.scrollTimer);
    }

3）如果手动滑动图片，需要停止自动轮播，当手指离开图片时，继续轮播

		    onTouchStart={()=>this.onTouchStart()}
                    onScrollEndDrag={()=>this.startScroll()}
                    onTouchEnd={()=>this.startScroll()}

其中，onTouchStart 是手指触摸scrollView时的调用；

onTouchEnd是手指离开scrollView时的调用（无滑动行为）；

onScrollEndDrag是手指触摸scrollView并且有滑动行为的调用。