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()}} //拖拽结束后开始自动切换
>
{/*渲染轮播图片*/}
{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} //否则页码加一
}
});
资源评论
