小伙伴们！今天咱就来说说React Native里的两款神奇组件：ScrollView和ListView。听到这儿，你可能有点懵逼：这都是什么鬼？别急，让我给你说来听听。
this.slide(e)}
onScrollBeginDrag={()=>{this.stopTimer()}} //用户拖拽时停止自动轮播
onScrollEndDrag={()=>{this.setTimer()}} //拖拽结束后开始自动切换
>
{/*渲染轮播图片*/}
{this.renderBanner()}
{/*渲染底部指示标签点*/}
{this.renderIndicate()}
来聊聊scrollview，这可是React Native里自带的一款神奇小零件。用这个小玩具，咱们就可以顺畅地滑动界面，而且还可以灵活动态地响应用户操作！那个scroll offset属性就是用来控制滚动方向的。比如想看水平方向的移动量，那直接拿event.nativeEvent.contentOffset.x瞅瞅就对了。
renderBanner(){
return zodiac.map((item,index)=>
)
}
renderIndicate(){
let jsx=[];
for (let i=0;i<zodiac.length;i++){
//判断是否为当前页，若为当前页则指示点color为蓝色，否则为白色
if (i===this.state.pageIndex){
jsx.push(●)
}else {
jsx.push(●)
}
}
return jsx;
}
接下来咱们得聊聊ListView了，这货特别厉害。你只要告诉它有哪些数据，以及怎么给每项单独地渲染，它就会把所有的数据都整整齐齐地展示在屏幕上~
slide(e){
let offset=e.nativeEvent.contentOffset.x; //获取x偏移量
let index=Math.floor(offset/DevWidth); //通过偏移量计算出当前页码
this.setState({
pageIndex:index
})
}
说到ScrollView，你知道吗？只要你滑动成功了，那scrollView就会触发一个叫做onMomentumScrollEnd的方法。到时候呢我们就可以用个名叫slide的方法，顺便带上event参数传给他~
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)
}
有个牛逼的方法！咱们可以定个时钟让画面自己换图。就用setInterval搞个pageIndex时不时调个数字增1，然后让图片对齐到相应的页面上。计算方式很简单，页面宽幅乘以这个数字，这样就能得出当前页面的位置了。
componentWillUnmount() {
clearInterval(this.timer);
}
说到ListView，这个技能满点的工具可有用了。只要设计好数据来源跟输出类型，它就能帮你生成一堆图标信息。举个例子，假如你家有一份json数据，想把它弄成一张图标配对图谱，那么毫无疑问，动作片ListView就是你最佳的伙伴！
哦对了，还有个超级牛X的功能！假如你有篇二维数组的数据集，有啥关系，ListView就能来帮你忙。把它们按照字母顺序排个序，再放到ListView中显示出来就行了。是不是特别方便呀？
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),
}
}
搞定，问题都解决了吗？ScrollView跟ListView都是React Native很好用的东西，可以帮咱们实现页面上下滑动和数据显示。不论是图片轮播还是图标列表，它俩都能满足~这次就给大伙儿讲一下这两样东西怎么用。希望对你们有用。有啥想说的或者疑问，直接留言或分享给好友。多谢！
评论0