/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image
} from 'react-native';
// 引入Dimensions类库
var Dimensions = require('Dimensions');
var ScreenW = Dimensions.get('window').width;
// 引入计时器类库
var TimerMixin = require('react-timer-mixin');
// 加载json数据
var ImageData = require('./ImageData.json');
var ScrollViewDemo = React.createClass({
// 注册计时器
mixins: [TimerMixin],
// 设置固定值
getDefaultProps(){
return{
// 每隔多少时间
duration:1000
}
},
// 设置可变和初始化值
getInitialState(){
return{
// 当前页面
currentPage:0,
}
},
render() {
return (
<View style={styles.container}>
<ScrollView
ref="scrollView"
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
// 当一帧滚动结束
onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
// 开始拖拽scrollView
onScrollBeginDrag={this.onScrollBeginDrag}
// 停止拖拽
onScrollEndDrag={this.onScrollEndDrag}
>
{this.renderAllImage()}
</ScrollView>
<View style={styles.indicatorViewStyle}>
{this.renderPageCircle()}
</View>
</View>
);
},
// 开始拖拽的时候调用
onScrollBeginDrag(){
// 停止定时器
this.clearInterval(this.timer);
},
// 停止拖拽的时候调用
onScrollEndDrag(){
// 开启定时器
this.startTimer();
},
// 组件已经加载完毕之后,实现一些复杂的操作
componentDidMount(){
// 开启定时器
this.startTimer();
},
// 开启定时器
startTimer(){
// 1.拿到scrollView
var scrollView = this.refs.scrollView;
var imgCount = ImageData.data.length;
// 2.添加定时器 this.timer 可以理解成一个隐士的全局变量
this.timer = this.setInterval(function () {
// 2.1设置圆点
var activePage = 0;
// 2.2判断
if((this.state.currentPage+1) >= imgCount){ //越界
activePage = 0;
}else{
activePage = this.state.currentPage+1;
}
// 3.更新状态机,重新绘制UI
this.setState({
currentPage:activePage
});
//4.让scrollView滚动起来
var offsetX = activePage * ScreenW;
scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:true});
},this.props.duration);
},
// 返回图片
renderAllImage(){
// 数组
var allImage = [];
// 拿到图片数据
var imageArr = ImageData.data;
// 遍历
for(var i=0;i<imageArr.length;i++){
// 取出单个图片对象
var imgItem = imageArr[i];
// 创建组件装入数组
allImage.push(
<Image key={i} source={{uri:imgItem.img}} style={{width: ScreenW,height:150}} />
);
}
// 返回
return allImage;
},
// 返回分页指示器圆点
renderPageCircle(){
// 定义一个数组放置所有的圆点
var indicatorArr = [];
var imgArr = ImageData.data;
// 特殊央视
var style;
for(var i=0;i<imgArr.length;i++){
// 判断style
style = (i==this.state.currentPage) ? {color:'orange'} : {color:'#fff'};
indicatorArr.push(
<Text key={i} style={[{fontSize:40},style]}>•</Text>
);
}
return indicatorArr;
},
// 当一帧滚动结束的时候调用
onAnimationEnd(event){
// 1.计算水平方向偏移量
var offsetX = event.nativeEvent.contentOffset.x
// 2.计算当前页码
var page = Math.floor(offsetX / ScreenW);
// 3.更新状态机,重新绘制UI
this.setState({
currentPage:page
});
},
});
const styles = StyleSheet.create({
container:{
marginTop:20,
},
// 分页指示器样式
indicatorViewStyle:{
width:ScreenW,
height:25,
backgroundColor:'rgba(0,0,0,0.4)',
position:'absolute',
bottom:0,
// 设置主轴方向,让圆点水平排列
flexDirection:'row',
// 侧轴方向
alignItems:'center'
}
});
AppRegistry.registerComponent('ScrollViewDemo', () => ScrollViewDemo);
运行效果: