react-native实现轮播图
一:需要的熟悉scrollView?scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它。那么,在开发中比如:焦点图、引导页等地方都需要它。注意:
二:scrollView的常用属性
当此属性为true时,水平方向即使内容比滚动视图本身还要小,也可以弹性地拉动一截。当horizontal={true}时默认值为true,否则为false。 三:轮播图1.首先确定焦点图样式:<View style={styles.container}>
<ScrollView
ref="scrollView"
horizontal={true}
//隐藏水平滚动条
showsHorizontalScrollIndicator={false}
//自动分页
pagingEnabled={true}
//当一帧滚动结束
onMomentumScrollEnd={(e)=>this.onAnimatinonEnd(e)}
//开始拖拽
onScrollBeginDrag = {()=>this.onScrollBeginDrag()}
//停止拖拽
onScrollEndDrag = {()=>this.onScrollEndDrag()}
>
{this.renderAllImage()}
</ScrollView>
{/*返回指示器 */}
<View style={styles.pageViewStyle}>
{this.renderPageCicle()}
</View>
</View>
二:然后展示图片??注意图片地址目录: renderAllImage(){
var allImage = [];
//拿到图像数组
var imgsArr = ImageData.data;
// console.log(imgsArr);
for(var i=0; i<imgsArr.length; i++){
// 去出单独的每个对象
var imgItem = imgsArr[i];
//创建组件装入数组
allImage.push(
<Image key={i} source={{uri:imgItem.img}} style={styles.focusImage} />
)
}
return allImage;
};
三:显示下面的五个小圆点renderPageCicle(){
var indicatorArr = [];
var ImgsArr = ImageData.data;
var styleChange;
for(var i=0; i<ImgsArr.length; i++){
//把原点装入数组
styleChange = (i==this.state.currentPage ? styles.circleStyle : styles.circleDefaultStyle)
indicatorArr.push(
<Text key={i} style={styleChange}>
•
</Text>
)
}
return indicatorArr;
};
四:当滚动一帧的时候调用??也就是可以找出滚动的索引 onAnimatinonEnd(e){
//1.水平方向上的偏移量
var offSetX = e.nativeEvent.contentOffset.x;
//2.求出当前页数
var currentPage = Math.floor(offSetX / width);
console.log(currentPage);
//3.更新状态机,重新绘制ui
this.setState({
currentPage:currentPage
})
}
五:开启定时器,自动滚动??我们要处理手指滑动的时候和滑动停止的时候滚动效果。其中复杂的处理关系在componentDidMount函数里执行,因为 在调用了render方法后,组件加载成功并被成功渲染出来以后,所要执行的后续操作,一般会在这个函数中处理网络请求等加载数据的操作;因为UI已经成功被渲染出来, 所以放在这个函数里进行请求操作,不会出现UI上的错误。 componentDidMount(){
//开启定时器
this.startTimer()
};
//开始拖拽
onScrollBeginDrag(){
//停止定时器
console.log('beginDrag');
clearInterval(this.timer)
};
onScrollEndDrag(){
console.log('endDrag');
this.startTimer();
};
//开启定时器
startTimer(){
//1.拿到scrollView
var scrollView = this.refs.scrollView;
var imageCount = ImageData.data.length;
//2.添加定时器
this.timer = setInterval(()=>{
//2.1设置原点
var activePage = 0;
//2.2判断
if((this.state.currentPage+1) >= imageCount){
activePage = 0;
}else{
activePage = this.state.currentPage+1;
}
//2.3更新状态机
this.setState({
currentPage : activePage,})
//2.4scrollView滚动起来
var offsetX = activePage * width;
scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:true});
},this.props.duration);
};
github源码:04focusImage (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |