Example of implementation method of ScrollView carousel chart in React Native

1.index.Android.js

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 (  
    <ScrollViewTop/>  
    );  
  }  
  
}  
AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);

2. Create a json file in the same directory as index.android.js of the project. This will facilitate image access. Resource images are placed in the project. Name\android\app\src\main\res\drawable

The BadgeData.json here is as follows:

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

3. The main file scrollViewTop.js file is as follows The specific comments have been written. Directly upload the code:

/** 
 * 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 (  
      <View style={styles.continer}>  
        <ScrollView  
          ref=&#39;scrollView&#39;  
          //水平方向            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();  
  }  
  
  /**1.轮播图片展示 */  
  _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;  
  }  
    
  /**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:&#39;orange&#39;}:{color:&#39;white&#39;};  
      indicatorArr.push(  
        <Text key={i} style={[{fontSize:30},style]}>  
         •  
        </Text>  
      );  
    }  
    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',  
  }  
});

The above is the detailed content of Example of implementation method of ScrollView carousel chart in React Native. For more information, please follow other related articles on the PHP Chinese website!