找的资料,缺陷就是现在手滑动的时候焦点不动,不是无缝滚动
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Text,
Button,
TouchableWithoutFeedback,
ScrollView,
Animated,
// Component,
} from 'react-native';
import Dimensions from 'Dimensions';
var screenWidth=Dimensions.get('window').width;
export default class Login extends Component {
constructor(props){
super(props);
this.state={
images:['#dfe24a','#68eaf9','#ef9af9'],
selectedImageIndex:0,
isNeedRun:true,
};
this._index=0;//当前正在显示的图片
this._max=this.state.images.length;//图片总数
}
render() {
var _scrollView=ScrollView;
//图片列表
let images=this.state.images.map((value,i)=>{
return (
<TouchableWithoutFeedback>
<View style={{width:screenWidth,height:120,backgroundColor:value}}></View>
</TouchableWithoutFeedback>
);
});
// 小圆点指示器
let circles=this.state.images.map((value,i)=>{
return (<View key={i} style={(i==this.state.selectedImageIndex)?styles.circleSelected:styles.circle}/>)
});
// 小圆点位置显示
let imageLength=this.state.images.length;
let circleLength=6*imageLength+5*2*imageLength;
let center=(screenWidth-circleLength)/2;
return(
<View style={styles.container}>
<ScrollView horizontal={true}
showsHorizontalScrollIndicator={true}
showsVerticalScrollIndicator={true}
onTouchStart={()=>this._onTouchStart()}
onTouchMove={()=>console.log('onTouchMove')}
onTouchEnd={()=>this._onTouchEnd()}
onScrollBeginDrag={()=>clearInterval(this._timer)}
onScrollEndDrag={()=>this._runFocusImage()}
pagingEnabled={true}
ref={(scrollView)=>{this._scrollView=scrollView;}}>
<Animated.View style={{flexDirection:'row'}}>{images}</Animated.View>
</ScrollView>
<View style={{flexDirection:'row',position:'absolute',top:100,left:center}}>{circles}</View>
</View>
);
}
//当手机按到scrollview时停止定时任务
_onTouchStart(){
clearInterval(this._timer);
}
_onTouchEnd(){
// 先滑动到指定index位置,再开启定时任务
this._scrollView.scrollTo({x:this._index*screenWidth});
// 重置小圆点提示器
this._refreshFocusIndicator();
this._runFocusImage();
}
// _onScroll(){
// // this._contentOffsetX=;
// this._index=Math.round(this._scrollView.contentOffset.x/screenWidth);
// }
_runFocusImage(){
if(this._max<=1){
return;
}
this._timer=setInterval(function () {
this._index++;
if(this._index>=this._max){
this._index=0;
}
this._scrollView.scrollTo({x:this._index*screenWidth},true);
// 重置小圆点指示器
this._refreshFocusIndicator();
}.bind(this),2000);
}
_refreshFocusIndicator(){
this.setState({selectedImageIndex:this._index});
}
// 组件加载完成
componentDidMount() {
this._runFocusImage();
}
// 组件即将卸载
componentWillUnmount() {
clearInterval(this._timer);
}
// 组件接收到新属性
componentWillReceiveProps(nextProps) {
}
}
const styles = {
container: {
flex:1,
flexDirection:'row',
},
circleContainer: {
position:'absolute',
left:0,
top:120,
},
circle: {
width:6,
height:6,
borderRadius:6,
backgroundColor:'#f4797e',
marginHorizontal:5,
},
circleSelected: {
width:6,
height:6,
borderRadius:6,
backgroundColor:'#ffffff',
marginHorizontal:5,
}
};
Login.defaultProps={
isNeedRun:true,
};
Login.propTypes={
// isNeedRun:PropTypes.bool,
// onItemClick:PropTypes.func,
};
AppRegistry.registerComponent('Login', () => Login);