React Native 之ScrollView轮播图实现方法实例

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TextInput, TouchableOpacity, ScrollView, Text, View } from 'react-native'; import ScrollViewDemo from "./scrollViewDemo"; import ScrollViewTop from "./scrollViewTop"; import PositionDemo from "./positionDemo"; export default class CQQLoginDemo extends Component { render() { return (  ); } } AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);

{ "data":[ { "icon" : "danjianbao", "title" : "单肩包" }, { "icon" : "liantiaobao", "title" : "链条包" }, { "icon" : "qianbao", "title" : "钱包" }, { "icon" : "shoutibao", "title" : "手提包" }, { "icon" : "shuangjianbao", "title" : "双肩包" }, { "icon" : "xiekuabao", "title" : "斜挎包" } ] }

/** * Sample React Native App * * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, ScrollView, Image, Text, View } from 'react-native'; let Dimensions = require('Dimensions'); let ScreenWidth = Dimensions.get('window').width; let ScreenHeight = Dimensions.get('window').height; import ImageData from "./BadgeData.json"; export default class scrollViewTop extends Component { constructor(props) { super(props); this.state = { currentPage: 0 }; } static defaultProps = { duration: 1000, } componentDidMount() { this._startTimer(); } componentWillUnmount() { // 如果存在this.timer，则使用clearTimeout清空。 // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear this.timer && clearTimeout(this.timer); } render() { return (  {this._onAnimationEnd(e)}} //开始拖拽 onScrollBeginDrag={()=>{this._onScrollBeginDrag()}} //结束拖拽 onScrollEndDrag={()=>{this._onScrollEndDrag()}} > {this._renderAllImage()}   {this._renderAllIndicator()}   ); } /**开始拖拽 */ _onScrollBeginDrag(){ console.log("开始拖拽"); //两种清除方式 都是可以的没有区别 // this.timer && clearInterval(this.timer); this.timer && clearTimeout(this.timer); } /**停止拖拽 */ _onScrollEndDrag(){ console.log("停止拖拽"); this.timer &&this._startTimer(); } /**1.轮播图片展示 */ _renderAllImage() { let allImage = []; let imgsArr = ImageData.data; for (let i = 0; i < imgsArr.length; i++) { let imgsItem = imgsArr[i]; allImage.push(  ); } return allImage; } /**2.手动滑动分页实现 */ _onAnimationEnd(e) { //求出偏移量 let offsetX = e.nativeEvent.contentOffset.x; //求出当前页数 let pageIndex = Math.floor(offsetX / ScreenWidth); //更改状态机 this.setState({ currentPage: pageIndex }); } /**3.页面指针实现 */ _renderAllIndicator() { let indicatorArr = []; let style; let imgsArr = ImageData.data; for (let i = 0; i < imgsArr.length; i++) { //判断 style = (i==this.state.currentPage)?{color:'orange'}:{color:'white'}; indicatorArr.push(  •  ); } return indicatorArr; } /**4.通过定时器实现自动播放轮播图 */ _startTimer(){ let scrollView = this.refs.scrollView; this.timer = setInterval( ()=>{console.log('开启定时器'); let imageCount = ImageData.data.length; //4.1 设置圆点 let activePage = 0; //4.2判断 if(this.state.currentPage>=imageCount+1){ activePage = 0; }else{ activePage = this.state.currentPage+1; } //4.3 更新状态机 this.setState({currentPage:activePage}); //4.4 让scrollview 滚动起来 let offsetX = activePage * ScreenWidth; scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:true}); }, this.props.duration ); } } const styles = StyleSheet.create({ continer:{ backgroundColor: '#dddddd' }, imageStyle:{ height:400, width:ScreenWidth }, pageViewStyle:{ height:25, width:ScreenWidth, backgroundColor:'rgba(0,0,0,0.4)', position:'absolute', bottom:0, flexDirection:'row', alignItems:'center', } });