React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
前端  /  管理员 发布于 4年前   534
本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法。分享给大家供大家参考,具体如下: ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下: 滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量。 组件所属的方法有: 例如利用ScrollView来实现一个Banner轮播: 页面结构如下: 利用map遍历数据数组zodiac,将图片渲染到页面 在底部渲染指示点: 当用户滑动结束时触发ScrollView的onMomentumScrollEnd方法,调用slide函数,并传递event参数给slide。通过计算得出用户滑到的当前页的索引pageIndex,其中页码的计算就是将x偏移量除以每个视图的宽度然后取整 设置定时器让视图自动更换,通过setInterval让pageIndex隔一段时间自动+1,然后让图片偏移到页码对应的图片,令页面索引乘以每个页面宽度即为当前页面对应的偏移量: 在组件销毁时清除定时器 使用步骤如下 1、定义数据源,在constructor中初始化state,创建一个DataSource对象,在state中定义数据源iconSource为外部导入的json数据icons,格式如下: 其中 2、在页面使用 3、实现渲染函数renderIcon,默认传入四个参数: 在renderIcon函数中定义每一个icon图标的渲染的方式,并返回JSX: 以上例子中的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对象: 在新建DataSource对象时需要传递四个函数参数 2、在页面中使用ListView 使用List View时设置其数据源及渲染方法 3、实现渲染方法,方法默认会传入参数rowData与sectionData 4、将数据放入dataBlob 在组件挂载完成后将数据按照格式放入dataBlob并更新数据源,使数据加载到页面 希望本文所述对大家React程序设计有所帮助。1、Scroll View
renderBanner(){ return zodiac.map((item,index)=>
renderIndicate(){ let jsx=[]; for (let i=0;i
slide(e){ let offset=e.nativeEvent.contentOffset.x; //获取x偏移量 let index=Math.floor(offset/DevWidth); //通过偏移量计算出当前页码 this.setState({ pageIndex:index })}
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
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当数据源变化时再重新渲染。renderIcon(rowData,sectionId,rowId,highlightRow){ return(
3、使用ListView渲染二维数据
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更新方式 })}
renderCarSection(sectionData){ return(
componentDidMount() { this.loadCarData();}loadCarData(){ let dataBlob={}, //dataBlob对象 sectionIDs=[], //sectionID数组 rowIDs=[], //rowID数组 cars=[]; for (let i=0;i
您可能感兴趣的文章:
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号