ES6：
import React, {
Component } from 'react';
import {
ScrollView,Text, View,StyleSheet,ToastAndroid, Button,Image,Dimensions, TouchableOpacity,
Platform
} from 'react-native';
const Dim = Dimensions.get('window')
const {
width} = Dim
export default class HomeScreen extends Component{
constructor(props) {
super(props);
this.state = {
scrollTime:3000,
scrollImage:[
{
img:require('../../images/OHR.jpg')
},
{
img:require('../../images/th.jpg')
},
{
img:require('../../images/OHR.StokePero.jpg')
}
],
currentPage:0
};
}
render(){
return (
<View>
<ScrollView
ref={
(views) => {
this.myScrollView = views }} //ES6获取节点元素的方式（与ES5有不同）
horizontal={
true}
showsHorizontalScrollIndicator={
false}
pagingEnabled={
true}
onMomentumScrollEnd={
(e)=>this.onAnimationEnd(e)}
onScrollBeginDrag={
this.onScrollBeginDrag()}
onScrollEndDrag={
this.onScrollEndDrag()}
>
{
this.getScrollImage()} //获取轮播图
</ScrollView>
<View style={
style.circlrBottom}>
{
this.getCirclr()} //获取圆点
</View>
</View>
);
}
getScrollImage(){
var ImageArr = [];
for (let index = 0; index < this.state.scrollImage.length; index++) {
var imageItem = this.state.scrollImage[index].img;
ImageArr.push(
<Image key={
index} source={
imageItem} style={
style.image}/>
)
}
return ImageArr;
}
getCirclr(){
var ImageArr = [];
for (let index = 0; index < this.state.scrollImage.length; index++) {
var style = (index==this.state.currentPage) ? 'orange' : 'white';
ImageArr.push(
<Text key={
index} style={
[{
fontSize:30,marginLeft:10},{
color:style}]}>•</Text>
)
}
return ImageArr;
}
onAnimationEnd(e){
var currentPage = Math.ceil(e.nativeEvent.contentOffset.x/width)
console.log(currentPage)
this.setState({
currentPage:currentPage})
}
componentDidMount(){
this.startTimer()
}
startTimer(){
//定时器的开启，让轮播图自动播放
this.interval=setInterval(() => {
if((this.state.currentPage+1)<this.state.scrollImage.length){
this.setState({
currentPage:this.state.currentPage+1});
}else{
this.setState({
currentPage:0});
}
var offSetX = this.state.currentPage*width;
this.myScrollView.scrollTo({
x: offSetX, y: 0, animated: true});
},this.state.scrollTime);
}
onScrollBeginDrag(){
//清除定时器
this.interval && clearInterval(this.interval);
}
onScrollEndDrag(){
this.startTimer()
}
}
const style = StyleSheet.create({
image:{
width:width,
// resizeMode:'contain',
height:200,
},
circlrBottom:{
height:25,
width:width,
backgroundColor:'rgba(0,0,0,0.4)',
position:'absolute',
bottom:0,
alignItems:'center',
flexDirection:'row',
}
})
ES5: 需要已定义安装定时器模块，在ES5 中，原生的定时器会在页面销毁之后继续执行，严重者导致闪退，所以会自定义安装定时器：
npm i react-timer-mixin --save
接着要进行引入定时器并注册：
import TimerMixin from 'react-timer-mixin'; //引入
var Component = React.createClass({
mixins: [TimerMixin],
getInitialState(){
//ES5的属性值与ES6 的写法不同
return{
currentPage:0,
scrollTime:3000
}
}
render(){
return (
<View>
<ScrollView
ref='scrollView' //ES6获取节点元素的方式（与ES5有不同）
horizontal={
true}
showsHorizontalScrollIndicator={
false}
pagingEnabled={
true}
onMomentumScrollEnd={
(e)=>this.onAnimationEnd(e)}
onScrollBeginDrag={
this.onScrollBeginDrag()}
onScrollEndDrag={
this.onScrollEndDrag()}
>
{
this.getScrollImage()} //获取轮播图
</ScrollView>
<View style={
style.circlrBottom}>
{
this.getCirclr()} //获取圆点
</View>
</View>
);
},
getScrollImage(){
var ImageArr = [];
for (let index = 0; index < this.state.scrollImage.length; index++) {
var imageItem = this.state.scrollImage[index].img;
ImageArr.push(
<Image key={
index} source={
imageItem} style={
style.image}/>
)
}
return ImageArr;
},
getCirclr(){
var ImageArr = [];
for (let index = 0; index < this.state.scrollImage.length; index++) {
var style = (index==this.state.currentPage) ? 'orange' : 'white';
ImageArr.push(
<Text key={
index} style={
[{
fontSize:30,marginLeft:10},{
color:style}]}>•</Text>
)
}
return ImageArr;
},
onAnimationEnd(e){
var currentPage = Math.ceil(e.nativeEvent.contentOffset.x/width)
console.log(currentPage)
this.setState({
currentPage:currentPage})
},
componentDidMount(){
this.startTimer()
},
startTimer(){
//定时器的开启，让轮播图自动播放
var scrollView = this.refs.scrollView;
this.timer = this.setInterval(function(){
if((this.state.currentPage+1)<this.state.scrollImage.length){
this.setState({
currentPage:this.state.currentPage+1});
}else{
this.setState({
currentPage:0});
}
var offSetX = this.state.currentPage*width;
scrollView.scrollTo({
x: offSetX, y: 0, animated: true});
},this.state.scrollTime)
},
onScrollBeginDrag(){
//清除定时器
this.clearInterval(this.timer);
},
onScrollEndDrag(){
this.startTimer()
}
}
});
const style = StyleSheet.create({
image:{
width:width,
// resizeMode:'contain',
height:200,
},
circlrBottom:{
height:25,
width:width,
backgroundColor:'rgba(0,0,0,0.4)',
position:'absolute',
bottom:0,
alignItems:'center',
flexDirection:'row',
}
})
总的来讲ES5和ES6有几点不同之处：1. 定时器的写法不同 2. 绑定节点元素进行获取不同（绑定方式不同，获取方式也不同）3. 整体的框架结构不同