React Native 之ScrollView轮播图实现 - ganchuanpu_H5之家

1.index.Android.js

import React, { Component } ; import { AppRegistry, StyleSheet, TextInput, TouchableOpacity, ScrollView, Text, View } ; import ScrollViewDemo ; import ScrollViewTop ; import PositionDemo ; export default class CQQLoginDemo extends Component { render() { return ( <ScrollViewTop/> ); } } AppRegistry.registerComponent(, () => CQQLoginDemo);

2.在项目的 index.android.js同一目录下创建json文件这样方便图片的访问，资源图片放在项目名称\android\app\src\main\res\drawable 下面

这里的BadgeData.json 如下：

{ :[ { : , : }, { : , : }, { : , : }, { : , : }, { : , : }, { : , : } ] }

3.主要的文件 scrollViewTop.js 文件如下具体注释中已写直接上代码：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } ; import { AppRegistry, StyleSheet, ScrollView, Image, Text, View } ; let Dimensions = require(); let ScreenWidth = Dimensions.).width; let ScreenHeight = Dimensions.).height; import ImageData ; 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 ( <View style={styles.continer}> <ScrollView //水平方向 horizontal={true} //当值为true时显示滚动条 showsHorizontalScrollIndicator={false} //当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上 pagingEnabled={true} //滑动完一贞 onMomentumScrollEnd={(e)=>{this._onAnimationEnd(e)}} //开始拖拽 onScrollBeginDrag={()=>{this._onScrollBeginDrag()}} //结束拖拽 onScrollEndDrag={()=>{this._onScrollEndDrag()}} > {this._renderAllImage()} </ScrollView> <View style={styles.pageViewStyle}> {this._renderAllIndicator()} </View> </View> ); } _onScrollBeginDrag(){ console.log(); //两种清除方式都是可以的没有区别 // this.timer && clearInterval(this.timer); this.timer && clearTimeout(this.timer); } _onScrollEndDrag(){ console.log(); this.timer &&this._startTimer(); } _renderAllImage() { let allImage = []; let imgsArr = ImageData.data; for (let i = 0; i < imgsArr.length; i++) { let imgsItem = imgsArr[i]; allImage.push( <Image key={i} source={{uri:imgsItem.icon}} style={styles.imageStyle} /> ); } return allImage; } _onAnimationEnd(e) { //求出偏移量 let offsetX = e.nativeEvent.contentOffset.x; //求出当前页数 let pageIndex = Math.floor(offsetX / ScreenWidth); //更改状态机 this.setState({ currentPage: pageIndex }); } _renderAllIndicator() { let indicatorArr = []; let style; let imgsArr = ImageData.data; for (let i = 0; i < imgsArr.length; i++) { //判断 style = (i==}:{color:}; indicatorArr.push( <Text key={i} style={[{fontSize:30},style]}> </Text> ); } return indicatorArr; } _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: }, imageStyle:{ height:400, width:ScreenWidth }, pageViewStyle:{ height:25, width:ScreenWidth, backgroundColor:, position:, bottom:0, flexDirection:, alignItems:, } });