轮播图简单实现

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image,
AlertIOS,

} from 'react-native';

var TimerMixin = require('react-timer-mixin');

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var one = 'https://img.alicdn.com/imgextra/i1/2228361831/TB2M8V4lctnpuFjSZFKXXalFFXa_!!2228361831.jpg';
var two = 'https://img.alicdn.com/bao/uploaded/i4/TB11hG9QXXXXXapaXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg';
var three = 'https://img.alicdn.com/bao/uploaded/i4/TB1JusePXXXXXapaXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg'
var fore = 'https://img.alicdn.com/bao/uploaded/i3/TB1j7_3KVXXXXanXXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg';
export default class scrollImage extends Component {

state = {
currentPage:0,
}

static defaultProps={
duration:2000
}

render() {
return (

<View style={styles.styleBackView}>
<ScrollView style={styles.styleScrollView}
ref="scrollView"
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
//滚动一页结束之后调用 滚动停止
onMomentumScrollEnd = {(obj)=>this.onAnimationEnd(obj)}
onScrollBeginDrag={()=>this.scrollBeginDrag()}
onScrollEndDrag={()=>this.scrollEndDrag()}
>
{this.creatImage()}
</ScrollView>

<View style={styles.stylePage}>
{this.creatPoint()}
</View>

</View>
)
}

creatImage() {

var array = [];
//无限滚动
// array.push(
//     <Image key={4} source={{uri:fore} }
//            style={styles.styleImage}
//     />
// )

array.push(
<Image key={0} source={{uri:one} }
style={styles.styleImage}
/>
)
array.push(
<Image key={1} source={{uri:two} }
style={styles.styleImage}
/>
)
array.push(
<Image key={2} source={{uri:three} }
style={styles.styleImage}
/>
)

array.push(
<Image key={3} source={{uri:fore} }
style={styles.styleImage}
/>
)
//无限滚动
// array.push(
//     <Image key={5} source={{uri:one} }
//            style={styles.styleImage}
//     />
// )

return array;

}

creatPoint(){

var array = [];
var style;
var fontSize;

for(var i=0;i<4;i++){

style = (i == this.state.currentPage) ? {color:'green'} : {color:'#ffffff'};
fontSize = (i == this.state.currentPage) ? {fontSize:35} : {fontSize:25};

array.push(
<Text key={i} style={[{marginLeft:5},style,fontSize]}>
•
</Text>

)

}

return array;

}

onAnimationEnd(obj){

var offsetx = obj.nativeEvent.contentOffset.x;
var currentPage = Math.floor(offsetx/width);

//无限滚动
// if (currentPage == 5){
//     obj.scrollTo({x:width,y:0,animated:false});
//     currentPage = 0;
// }else if (currentPage == 0){
//
//     let scrollX = 4*width;
//
//     obj.scrollTo({x:scrollX,y:0,animated:false});
//
//     currentPage = 3;
//
// }else{
//
//     currentPage = currentPage - 1;
//
// }

this.setState({
currentPage:currentPage

});

}

//UI加载完成
componentDidMount() {
//无限滚动
// var scrollView = this.refs.scrollView;
// scrollView.scrollTo({x:width,y:0,animated:false});
this.startTimer()
}

scrollBeginDrag(){
clearInterval(this.timer);
}

scrollEndDrag(){
this.startTimer();
}

startTimer(){
//获取到scrollVIew
var scrollView = this.refs.scrollView;
var obj = this;

this.timer = setInterval(function () {

var activePage = 0;
if(obj.state.currentPage>= 3){
activePage = 0;
}else {
activePage = obj.state.currentPage + 1;
}

obj.setState({
currentPage:activePage

})

var offsetX = activePage * width;

scrollView.scrollTo({x:offsetX,y:0,animated:true});

},this.props.duration);

}

}

const styles = StyleSheet.create({
styleBackView: {
backgroundColor: 'red',

},
styleScrollView: {
marginTop: 50,

},
styleImage: {
width: width,
height: 200,
backgroundColor: 'yellow'
},
stylePage:{
backgroundColor:'rgba(0,0,0,0.3)',
width:width,
height:30,
position:'absolute',
bottom:0,
alignItems:'center',
flexDirection:'row',
justifyContent:'flex-end',
paddingRight:30,
}

});