ScrollView
一个包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统，ScrollView会简单粗暴地把所有子元素一次性全部渲染出来。
注意与易错：
1.ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。
2.horizontal bool #：设置true时，为水平排布，默认值为false。
3.onMomentumScrollEnd?: function
滚动动画结束时调用此函数。
scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)
滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。
使用示例:scrollTo({x: 0, y: 0, animated: true})
1. 手指拖动之后，scrollview 滚动动画结束 回调 ：onMomentumScrollEnd
2.手指拖动之手指离开界面回调：onScrollEndDrag
所以：onScrollEndDrag 一定会被调用，onMomentumScrollEnd 如果手指拖动很慢，没有动画滚动就不会调用。
4.在计时器中的this不是本身的this，而是window。需要进行改正，将this赋值给另一个变量。
~~~
startTimer(){
//1.
var scrollView =this.refs.scrollView;
var imgCount = Data.data.length;//获取数据中的数组的长度，即获取ScrollView中的视图的page
var obj =this;//将this替换成obj，以便使用。
this.timer=setInterval(function(){//时间机器
var currentPage =0;//设置当前的视图
if((obj.state.currentPage+1)>= imgCount){//如果当前视图超过规定页数返回第一页
currentPage =0;
}else{
currentPage = obj.state.currentPage+1;
}
obj.setState({
currentPage:currentPage,//设置状态机，通过状态机来改变当前视图
})
var offsetX = width*currentPage;
scrollView.scrollTo({x:offsetX,y:0,animated:true});//滑动到
},this.props.duration);
}
~~~
附上我学scrollView的代码：
~~~
Data.json:
{
"data":[
{
"img":"http://ww1.sinaimg.cn/large/005T39qagy1ftk2dlo9hgj311y0lcdh8.jpg",
"title":"hahaha"
},
{
"img":"http://ww1.sinaimg.cn/large/005T39qagy1ftk2ffm8rcj311y0lcq3w.jpg",
"title":"hihihi"
},
{
"img":"http://ww1.sinaimg.cn/large/005T39qagy1ftk2fq8p4aj311y0lcwi1.jpg",
"title":"xixixi"
},
{
"img":"http://ww1.sinaimg.cn/large/005T39qagy1ftk2g7e8myj31ao0t60yb.jpg",
"title":"hehehe"
},
{
"img":"http://ww1.sinaimg.cn/large/005T39qagy1ftk2gjdvufj30x40k5gn9.jpg",
"title":"yoyoyo"
}
]
}
~~~
ScrollViewTest：
~~~
import React, {Component }from 'react';
import {ScrollView, StyleSheet, Text, View ,Image}from 'react-native';
//.....................
//
//
//
// var TimerMixin =require('react-timer-mixin');
import Datafrom './Data';
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
export default class ScrollTestextends Component{
//minxin:[TimerMixin];
state={
currentPage:0,
}
static defaultProps={
duration:1000,
}
render(){
return(
ref="scrollView"
showsHorizontalScrollIndicator={true}
onScrollEndDrag={()=>this.startTimer()}
onScrollBeginDrag={()=>this.ScrollBeginDrag()}
onMomentumScrollEnd={(e)=>this.onScrollAnimationEnd(e)}
>
{this.renderAllImage()}
{this.renderPage()}
);
}
//
componentDidMount(){
//定时器
this.startTimer();
}
ScrollBeginDrag(){
clearInterval(this.timer)
}
startTimer(){
//1.
var scrollView =this.refs.scrollView;
var imgCount = Data.data.length;
var obj =this;
this.timer=setInterval(function(){
//2.
var currentPage =0;
if((obj.state.currentPage+1)>= imgCount){
currentPage =0;
}else{
currentPage = obj.state.currentPage+1;
}
obj.setState({
currentPage:currentPage,
})
var offsetX = width*currentPage;
scrollView.scrollTo({x:offsetX,y:0,animated:true});
},this.props.duration);
}
onScrollAnimationEnd(e){
var offsetX = e.nativeEvent.contentOffset.x;
var currentPage = Math.floor(offsetX/width);
this.setState({
currentPage:currentPage,
});
}
renderPage(){
var style;
var pageArr =[];
var imgsArr =Data.data;
for(var i =0 ;i
style=(i==this.state.currentPage)?{color:'orange'}:{color:'#ffffff'}
pageArr.push(
style={[{fontSize:30},style]}
>•
)
}
return pageArr;
}
renderAllImage(){
var allImage=[];
var imgArr = Data.data;
for(var i=0;i
var imgItem = imgArr[i];
allImage.push(
source={{uri:imgItem.img}}
style={{width:width,height:150}}
/>
)
}
return allImage;
}
}
const styles =StyleSheet.create({
page:{
width:width,
height:25,
backgroundColor:'rgba(0,0,0,0.4)',
//diwei
position:'absolute',
bottom:0,
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
}
})
~~~
