/*在上篇基础上增加的功能做个抽奖demo ，比较粗略，其它一些优化下次再做出来
1.开始是静止的
2.颜色调制
3.图片前面配上文字
4.按钮样式优化
bug:连续点击“开始抽奖”按钮后，无法停止。
*/
import React, { Component } from'react';
import {
StyleSheet,
Text,
View,
ScrollView,
Alert,
Button,
Image,
} from'react-native';
//引入数据
let ImageData = require('./Resource/imgData.json');
let Dimensions = require('Dimensions');
let {width, height} = Dimensions.get('window');
exportdefault class viewdemo extends Component {
// 常量
// props
//
// ES6中需要用在constructor中有super(props)来传递props。
// ES6中getDefaultProps是class的属性而不是方法，不能定义在组件内部，需要单独写在外面。
// 同理，ES6中propTypes也需要写在外面。
//defaultProps
static defaultProps = {
//每隔多少秒执行一次
duration:100
}
//设置可变值和初始值
// getInitialState(){ //ES5模式
// return {
// // 当前页
// currentPage: 0
// }
// }
constructor(props) {// 构造函数
super(props);
//ES6模式
this.state = {
enabledScroll :true,
currentPage:0
};
}
onButtonPressRun(){
this.startTime();
this.setState({
scrollEnabled :true
})
}
onButtonPressStop(){
clearInterval(this.timer);
this.setState({
scrollEnabled :false
})
}
scrollEnabledOrNot(){
clearInterval(this.timer);
this.setState({
scrollEnabled :!enabledScroll
})
}
// 开始拖拽时调用
onScrollerBeginDrag(){
// 停止定时器
clearInterval(this.timer);
this.setState({
scrollEnabled :false
})
}
// 停止拖拽时调用
onScrollEndDrag(){
// 开启定时器
//
clearInterval(this.timer);
this.setState({
scrollEnabled :false
})
}
onClick(){
clearInterval(this.timer);
}
// 复杂操作
componentDidMount(){
// debugger
// 开启定时器
this.startTime();
}
// 开启定时器
startTime(){
// 1.拿到scrollerView
let scrollerView =this.refs.scrollerView;
let imageCount = ImageData.data.length;
// 2.添加定时器
// 2.1 设置圆点
let activePage =0;
this.timer = setInterval(() => {
// 2.2 判断
if((this.state.currentPage+1) >= imageCount){
activePage =0;
}else {
activePage =this.state.currentPage+1;
}
// 2.3 更新状态机
this.setState({
// 当前页
currentPage: activePage
})
// 2.4 让scrollerVeiw滚动起来
let offsetX = activePage * (width+8);
scrollerView.scrollTo({x: offsetX, y:0, animated:true});
},this.props.duration);
}
render(){
return(
style={styles.circulateViewStyle}
// 水平滚动
horizontal={true}
// 是否显示水平滚动条
showsHorizontalScrollIndicator={false}
// 安页滚动
scrollEnabled={(e)=>this.scrollEnabledOrNot(e)}
pagingEnabled={true}
onClick={(e)=>this.scrollEnabledOrNot(e)}
//滚动动画结束时调用此函数
onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
//开始拖拽
onScrollBeginDrag={(e)=>this.onScrollerBeginDrag(e)}
//停止拖拽
onScrollEndDrag={(e)=>this.onScrollEndDrag(e)}
>
{this.creatImages()}
{/*底部页面指示器*/}
onPress={(e)=>this.onButtonPressStop(e)}
title="恭喜中奖"
color="red"
height={55}
accessibilityLabel="Learn more about this purple button"
/>
onPress={(e)=>this.onButtonPressRun(e)}
title="开始抽奖"
color="green"
height={55}
accessibilityLabel="Learn more about this purple button"
/>
);
}
//返回所有的图片
creatImages(){
//数组
let allImage = [];
//拿到图形数组
let imageArrs = ImageData.data;
//遍历
for (var i =0; i < imageArrs.length; i++){
//取出每一个单独的对象
var imageItem = imageArrs[i];
//创建组件放入数组
allImage.push(
);
}
// 返回数组
return allImage;
}
// 返回页面指示器的圆点
renderPageIndex(){
// 数组
let indicatorArr = [];
//拿到图形数组
let imageArrs = ImageData.data;
//样式
var style;
//遍历
for (var i =0; i < imageArrs.length; i++){
// 判断
style = (i==this.state.currentPage) ? {color:'orange'} : {color:'#E8E8E8'}
//放入圆点
indicatorArr.push(
// 多个样式使用[]数组来放
•
);
}
//返回
return indicatorArr;
}
// 当一帧滚动结束的时候调用
onAnimationEnd(e){
// 1.求出水平方向的偏移量
var offsetX = e.nativeEvent.contentOffset.x;
// 2.求出当前的页数 floor函数 取整
var currentPage = Math.floor(offsetX / width);
// 3.更新状态机
this.setState({
// 当前页
currentPage: currentPage
})
}
}
const styles = StyleSheet.create({
circulateViewStyle: {
// backgroundColor:"#ff3304",
// marginTop:20,
height:height,
width:width,
flex:1,
},
scrollViewStyle:{
// backgroundColor:"#ff3304",
// marginTop:20,
flex:1,
height:height-50,
width:width,
},
imageStyle: {
width:width+8,
height:height-50,
flex:1,
// flex:1,
flexDirection:'row',
justifyContent:'space-around',
alignItems:'stretch',
// resizeMode:'contain'
},
buttonViewStyle: {
// flex:1,
// width:500,
// height:55,
// backgroundColor:'rgba(1, 0, 0, 0.4)',
// position:'absolute',
// bottom:0,
flexDirection:'row',
// justifyContent:'center',
// alignItems:'flex-start'
},
buttonStyle: {
flex:1,
// width:500,
// height:55,
// backgroundColor:'rgba(1, 0, 0, 0.4)',
// position:'absolute',
// bottom:0,
// flexDirection:'row',
// justifyContent:'center',
// alignItems:'flex-start'
}
});
#####精彩稍后继续,尽请点赞打赏.
网友评论