本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法。分享给大家供大家参考，具体如下：
1、Scroll ViewScrollView是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"https://www.jb51.net/"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()}} //拖拽结束后开始自动切换 > {/*渲染轮播图片*/} {this.renderBanner()} </ScrollView> <View style={styles.indicateBar}> {/*渲染底部指示标签点*/} {this.renderIndicate()} </View> </View>
利用map遍历数据数组zodiac，将图片渲染到页面
renderBanner(){ return zodiac.map((item,index)=> <Image key={index} source={{uri:'asset:/zodiac/'+item.image+'.jpg'}} style={styles.itemImage} /> ) }
在底部渲染指示点：
renderIndicate(){ let jsx=[]; for (let i=0;i<zodiac.length;i++){ //判断是否为当前页，若为当前页则指示点color为蓝色，否则为白色 if (i===this.state.pageIndex){ jsx.push(<Text key={i} style={{fontSize:15,color:'#5cb0ff'}}>●</Text>) }else { jsx.push(<Text key={i} style={{fontSize:15,color:'#ffffff'}}>●</Text>) } } return jsx; }
当用户滑动结束时触发ScrollView的onMomentumScrollEnd方法，调用slide函数，并传递event参数给slide。通过计算得出用户滑到的当前页的索引pageIndex，其中页码的计算就是将x偏移量除以每个视图的宽度然后取整
slide(e){ let offset=e.nativeEvent.contentOffset.x; //获取x偏移量 let index=Math.floor(offset/DevWidth); //通过偏移量计算出当前页码 this.setState({ pageIndex:index }) }
设置定时器让视图自动更换，通过setInterval让pageIndex隔一段时间自动+1，然后让图片偏移到页码对应的图片，令页面索引乘以每个页面宽度即为当前页面对应的偏移量：
setTimer(){ this.timer=setInterval(()=>{ this.setState((preState)=>{ //更新pageIndex if(preState.pageIndex>=(zodiac.length-1)){ //如果页码达到上界则归零 return {pageIndex:0} }else { return {pageIndex:preState.pageIndex+1} //否则页码加一 } }); // 让图片偏移到页码所对应的页面 let offset=this.state.pageIndex*DevWidth; this.refs.scrollView.scrollTo({x:offset,y:0,animated:true}); },2000) }
在组件销毁时清除定时器
componentWillUnmount() { clearInterval(this.timer); }
2、List View<ListView>用于将一组相同类型的数据渲染到页面上，你只需要定义好数据源与单个组件如何渲染，它便会将所有数据渲染完成。例如将如下左边json数据渲染为右边icon列表：
使用步骤如下
1、定义数据源，在constructor中初始化state，创建一个DataSource对象，在state中定义数据源iconSource为外部导入的json数据icons，格式如下：