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

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

这里的BadgeData.JSON 如下：

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

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

/**  * 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='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();
    }
      /**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:'orange'}
:{
color:'white'}
    ;
        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',    }
  }
    );
    

以上就是React Native 之ScrollView轮播图实现方法实例的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！