React Native中ScrollView组件轮播图与ListView渲染列表

本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法。分享给大家供大家参考，具体如下：

1、Scroll View

ScrollView是React Native提供的滚动视图组件，渲染一组视图，用户可以进行滑动响应交互，其常用属性如下：

滚动的偏移量：通过event.nativeEvent.contentOffset.x可以得到水平偏移量。

• horizontal={bool}，属性为true时，所有子视图在水平方向排列，否则在纵向排列。默认为false。
• pagingEnabled={bool}，属性为true时，滚动会停留在视图尺寸整数倍位置上，即正好显示某个视图，默认为false
• scrollEnabled={bool}，值为false时，视图不能滚动，默认true
• showsHorizontalScrollIndicator={bool}，值为true在滚动时会在屏幕底部显示一个滚动条，默认true
• showsVerticalScrollIndicator={bool}，值为true在滚动时显示垂直方向的滚动条，默认true。
• keyboardDismissMode="none"/"on-drag"，滑动视图时是否隐藏软键盘，默认none不隐藏。
• onContentChange={function}，当ScrollView视图大小发生变化时调用函数。
• onScroll={function}，当滚动视图时调用函数。
• onMomentumScrollStart={function}，滚动开始调用函数。
• onMomentumScrollEnd={function}，滚动结束时调用函数。

组件所属的方法有：

• scrollTo({x:num,y:num,animated:bool})，组件视图滚动到指定x，y位置，第三个参数为是否启用动画
• scrollToEnd({animated:bool})，滚动到视图末尾。

例如利用ScrollView来实现一个Banner轮播：

页面结构如下：

<View style={styles.banner}>
 <ScrollView ref="scrollView"   horizontal={true}
       pagingEnabled={true} showsHorizontalScrollIndicator={false}
       onMomentumScrollEnd={(e)=>this.slide(e)}
       onScrollBeginDrag={()=>{this.stopTimer()}}   //用户拖拽时停止自动轮播
       onScrollEndDrag={()=>{this.setTimer()}}    //拖拽结束后开始自动切换
 >
  {/*渲染轮播图片*