本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法。分享给大家供大家参考,具体如下:
成都创新互联从2013年创立,先为千山等服务建站,千山等地企业,进行企业商务咨询服务。为千山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下:
滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量。
组件所属的方法有:
例如利用ScrollView来实现一个Banner轮播:
页面结构如下:
this.slide(e)} onScrollBeginDrag={()=>{this.stopTimer()}} //用户拖拽时停止自动轮播 onScrollEndDrag={()=>{this.setTimer()}} //拖拽结束后开始自动切换 > {/*渲染轮播图片*/} {this.renderBanner()} {/*渲染底部指示标签点*/} {this.renderIndicate()}
利用map遍历数据数组zodiac,将图片渲染到页面
renderBanner(){ return zodiac.map((item,index)=>) }
在底部渲染指示点:
renderIndicate(){ let jsx=[]; for (let i=0;i●) }else { jsx.push( ● ) } } 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); }
使用步骤如下
1、定义数据源,在constructor中初始化state,创建一个DataSource对象,在state中定义数据源iconSource为外部导入的json数据icons,格式如下:
let icons=require('./mockdata/icons.json').data; constructor(props){ super(props); let dataSource = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2}); this.state={ iconSource:dataSource.cloneWithRows(icons), } }
其中{rowHasChaged:(r1,r2)=>r1!==r2}
,是告诉ListView当数据源变化时再重新渲染。
2、在页面使用
3、实现渲染函数renderIcon,默认传入四个参数:
在renderIcon函数中定义每一个icon图标的渲染的方式,并返回JSX:
renderIcon(rowData,sectionId,rowId,highlightRow){ return() } {rowData.title}
以上例子中的data是个一维数组,数组每个元素中包含title与image两个字段,如果data是个二维数组,例如
其中data数组的一维元素中包含title与cars,而cars又是一个数组。使用ListView将其渲染为上面右图所示按首字母分类的列表。
存储原理:
ListView使用DataBlob来存储二维数据,其结构如下:
DataBlob按照一定的格式组织二维数据,如上左图。DataBlob首先存储数组的第一维section并为其分配ID,例如将上面的一维数组的"title":"A",存储为DataBlob[0]="title":"A",分配sectionID为0,"title":"B",存储为DataBlob[1]="title":"B",分配ID为1......以此类推。
之后再存储数组的第二维row,例如"cars":[{"name":"奥迪","icon": "m_9_100.png"}],它的第一维sectionID为0,第二维rowID为2,将其存储为DataBlob[0:2]={"name":"奥迪","icon": "m_9_100.png"}。
ListView使用步骤如下:
1、设置数据源
与一维ListView使用类似,首先在constructor中设置state为DataSource对象:
this.state={ carData:new ListView.DataSource({ getSectionData:(dataBlob,sectionID)=>dataBlob[sectionID], //设置sectionData获取方式 getRowData:(dataBlob,sectionID,rowID)=>dataBlob[sectionID+':'+rowID], //设置rowData获取方式 sectionHeaderHasChanged:(s1,s2)=>s1!==s2, //设置section更新方式 rowHasChanged:(r1,r2)=>r1!==r2 //设置row更新方式 }) }
在新建DataSource对象时需要传递四个函数参数
2、在页面中使用ListView
使用List View时设置其数据源及渲染方法
3、实现渲染方法,方法默认会传入参数rowData与sectionData
renderCarSection(sectionData){ return() } renderCarRow(rowData){ return( {sectionData} ) } {rowData.name}
4、将数据放入dataBlob
在组件挂载完成后将数据按照格式放入dataBlob并更新数据源,使数据加载到页面
componentDidMount() { this.loadCarData(); } loadCarData(){ let dataBlob={}, //dataBlob对象 sectionIDs=[], //sectionID数组 rowIDs=[], //rowID数组 cars=[]; for (let i=0;i
希望本文所述对大家React程序设计有所帮助。