ReactNative 实现图片轮播器

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React , { Component } from 'react' ;

import {

AppRegistry , //注册

StyleSheet , //样式

Text ,

View ,

Image ,

TextInput ,

TouchableOpacity ,

AlertIOS ,

ScrollView ,

} from 'react-native' ;

class ClassName {

constructor () {

}

}

var Dimensions = require ( 'Dimensions' ) ;

var widt = Dimensions. get ( 'window' ). width ;

//引入JsonShuju

var imagesdata = require ( './ImageData.json' ) ;

//引入定时器

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

var FScrollViewDemo1 ;

FScrollViewDemo1 = React. createClass ({

mixins : [TimerMixin] ,

//设置固定值

getDefaultProps (){

return {

//每隔多少

duration : 2000

}

} ,

//设置可变的初始值

getInitialState (){

return {

//当前页码

currentPage : 0

}

} ,

render (){

return (

<View style = {styles. container } >

<ScrollView

ref ="scrollViewxx" horizontal = { true }

showsHorizontalScrollIndicator = { false }

pagingEnabled = { true }

onMomentumScrollEnd = {(s)=> this . onAnimationEnd (s)}

onScrollBeginDrag = { this . onScrollBeginDrag }

onScrollEndDrag = { this . onScrollEndDrag }

>

{ this . reanderAllImage ()}

</ScrollView>

{ /** 返回指示器*/ }

<View style = {styles. pageViewControlcontainer } >

{ this . reanderAllFivePoint ()}

</View>

</View>

) ;

} ,

//实现复杂操作

componentDidMount () {

//开启定时器

this . startTimer () ;

} ,

//开启定时器

startTimer (){

//1、拿到我们的ScrollView

var myscorllview = this . refs .scrollViewxx ;

//2、添加定时器

this . timer = this . setInterval ( function (){

//每隔多少秒执行函数

//2.1设置远点

var activePage ;

//2.2判断

if (( this . state . currentPage + 1 ) >= imagesdata.data. length ){

activePage = 0 ;

} else {

activePage = this . state . currentPage + 1 ;

}

//跟新状态机

this . setState ({

currentPage :activePage

}) ;

//

var offset =activePage * widt ;

myscorllview. scrollResponderScrollTo ({ x :offset , y : 0 , animated : true }) ;

} , this . props . duration ) ;

} ,

//开始拖仔停止定时器

onScrollBeginDrag (){

this . clearInterval ( this . timer ) ;

} ,

onScrollEndDrag (){

//开启定时器

this . startTimer () ;

} ,

reanderAllImage (){

var allImages = [] ;

var ImageArray = imagesdata.data ;

for ( var i = 0 ; i < ImageArray. length ; i++) {

var imageItem = ImageArray[i] ;

//创建组件装入数组

allImages. push (

<Image key = {i} source = {{ uri : imageItem. img }} style = {{ width : widt , height : 200 }} />

) ;

}

return allImages ;

} ,

reanderAllFivePoint (){

var allImages = [] ;

var style ;

var ImageArray = imagesdata.data ;

for ( var i = 0 ; i < ImageArray. length ; i++) {

//

style = (i == this . state . currentPage ) ? { color : 'orange' } : { color : 'white' } ;

//创建组件装入数组

allImages. push (

<Text key = {i} style = {[{ fontSize : 25 } , style]} > &bull; </Text>

) ;

}

return allImages ;

} ,

//当一睁滚动结束的时候调用

onAnimationEnd (s){

var offset = s. nativeEvent . contentOffset . x ;

var current = Math . floor (offset / widt) ;

//3 更新状态机

this . setState ({

currentPage :current

}) ;

}

}) ;

const styles = StyleSheet. create ({

container :{

marginTop : 20

} ,

pageViewControlcontainer :{

width :widt ,

height : 25 ,

backgroundColor : 'rgba(0,0,0,0.2)' ,

position : 'absolute' ,

bottom : 0 ,

flexDirection : 'row' ,

justifyContent : 'center'

}

}) ;

AppRegistry. registerComponent ( 'second' , () => FScrollViewDemo1) ;

// //ES6

// class second extends Component{

// //初始化方法－－－－》 返回具体组建内容

// //写结构和内容

// render() {

// return (

//

// <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} pagingEnabled={true}>

//

// {this.renderChildView()}

//

// </ScrollView>

// );

// }

//

//

// renderChildView(){

//

// var allChild = [];

// var colorsArray = ['red','blue','purple','yellow','green','red','blue','purple','yellow','green'];

//

// for (var i = 0; i < 10; i++){

//

// allChild.push(

//

// <View key={i} style={{backgroundColor:colorsArray[i],width:414,height:200}}>

//

// <Text>

// {i}

// </Text>

// </View>

// );

//

// }

//

// return allChild;

//

// };

//

//

// }