Banner广告栏效果在应用中相当的普遍,比如网易,搜狐等新闻客户端以及天猫,京东之类的商城,在Android原生开发中一般会用ViewPager.实现起来也相对容易,在这里我简单介绍下用React Native(RN)如何来实现这种效果.
其实RN为我们提供了ScrollView组件,封装了已经很完善了,我们只需要在其中加入我们的业务逻辑就可以了.
<ScrollView
ref='scrollView'
automaticallyAdjustContentInsets={false}
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
onMomentumScrollEnd={this.onAnimationEnd.bind(this)}
onScrollBeginDrag={this._onScrollBegin.bind(this)}
>
简单介绍下属性的意思:
ref:对外暴漏出该组件.
automaticallyAdjustContentInsetsbool#
如果滚动视图放在一个导航条或者工具条后面的时候,iOS系统是否要自动调整内容的范围。默认值为true。(译注:如果你的ScrollView或ListView的头部出现莫名其妙的空白,尝试将此属性置为false)
horizontal bool
当此属性为true的时候,所有的的子视图会在水平方向上排成一行,而不是默认的在垂直方向上排成一列。默认值为false。
pagingEnabledbool
当值为true时,滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。
showsHorizontalScrollIndicator bool
当此属性为true的时候,显示一个水平方向的滚动条。
onMomentumScrollEnd :func
当滑动结束的时候回调该方法.
onScrollBeginDr