ReactNative基础（三）了解ScrollView并打造一个Banner效果

作者：阿钟

博客：http://blog.csdn.net/a_zhon

此博客基于react-native-0.48.4

ScrollView简介

• 一个包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

• 这个就跟Android中的ScrollView总体来说是一样的，将会超出屏幕的视图使用ScrollView包裹来滑动查看。

• ScrollView文档属性介绍

来编写个案例实现下

新创建个ScrollTest.js组件，然后在index.android.js中引入这个组件

index.android.js

在组件中创建5个视图让内容超出屏幕，这样使用ScrollView就可以清楚的看到效果

效果图：

使用呢也是超级的简单，将需要滑动的内容包裹即可。

了解ScrollView常用的一些属性

• horizontal bool 当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。

• showsHorizontalScrollIndicator bool 当此属性为true的时候，显示一个水平方向的滚动条。

• showsVerticalScrollIndicator bool 当此属性为true的时候，显示一个垂直方向的滚动条。

• pagingEnabled bool 当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。

• scrollEnabled bool 当值为false的时候，内容不能滚动，默认值为true。

• onMomentumScrollEnd?: function 滚动动画结束时调用此函数。

• 更多属性和方法介绍可以看这里ScrollView

将ScrollView设置为水平滚动，来查看下效果：

好了，基本使用也就这些了；接下来使用ScrollView实现一个自动轮播的Banner。

使用ScrollView打造一个轮播图，创建一个banner.js组建来码代码。

先来欣赏一下效果图这样才有看下去的动力，是吧！ 

第一步：定义好我们的图片资源，创建一个水平的ScrollView并循环往里面添加需要展示的图片

• 一个可以横向滑动的Viewpager效果就出来了

• 接下来就需要添加我们底部的页面指示器了，与添加图片方式一致for循环添加。

第二步：添加底部的页面指示器，在render()函数中添加代码就不贴出所有了，避免篇幅太长。

底部指示器效果：

第三步：当我们左右滑动的时候我们需要来改变底部指示器圆点的颜色

• 我们需要一个变量来保存当前滑动到了哪一个页面，我们可以定义一个var position

• 现在我们来修改ScrollView，添加一个页面滑动监听

• 通过监听函数，我们获取到了用户当前滑动到了哪一个页面；那么现在我们就需要动态修改指示器圆点对应的颜色。（如果没有阅读过这篇ReactNative基础（二）了解组件的生命周期，可以先看完再回过头来看这篇）

• 现在我们只需要修改上面已经定义好的getIndicators()函数即可

欣赏下成果：

到这里基本上一个可以手动滑动的ViewPager效果就做好了是不是very exciting，为了让我们的ViewPager更加高大上我们添加个定时器，让它自动轮播。

• 我们先来定义轮播的间隔时间

• 当组件完全渲染完成之后，开启我们的定时器。

var scrollView = this.refs.scrollView;这行代码就有点类似Android中的findViewById()来获取视图中的某个View，所以我们需要在ScrollView中添加一个属性，如下：

• 最最最后一步，当我们手动滑动轮播图的时候需要取消掉计时器、滑动结束之后恢复循环。

手指抬起的时候也就是，我们滑动一页完毕之后的事件；也就是我们上面使用到的一个函数onAnimationEnd()那么我们只需要在函数的末尾继续调用我们的开启计时器函数即可。

好了一个美妙的轮播图效果就完成了；不负春光，野蛮生长。

【文章链接】

ScrollView文档属性介绍：

http://reactnative.cn/docs/0.48/scrollview.html#content

ScrollView：

http://reactnative.cn/docs/0.48/scrollview.html#content

ReactNative基础（二）了解组件的生命周期：

http://blog.csdn.net/a_zhon/article/details/78113370

定时器：

http://reactnative.cn/docs/0.48/timers.html#content

【码源】

https://github.com/azhon/ReactNative/tree/master/UseScrollView

一命二运三风水，四修阴德五读书！

刘桂林

微信号 : Android_LiuGuiLin

新浪微博：@刘某人程序员