react-native实现轮播图

目录

一:需要的熟悉scrollView?

二:scrollView的常用属性 

三:轮播图


一:需要的熟悉scrollView?

scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它。那么,在开发中比如:焦点图、引导页等地方都需要它。注意:

  • scrollView必须有一个确定的高度才能正常工作;
    通常有两种做法:
      第一种: 直接给该ScrollView进行设置高度(不建议);
      第二种: ScrollView中不要加{flex:1}。
     
  • ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者.
     

二:scrollView的常用属性 
 

  • contentContainerStyle:这些样式会应用到一个内层的内容容器上,所有的子视图都会包裹在内容容器内;
  • horizontal 当此属性为true的时候,所有的的子视图会在水平方向上排成一行,而不是默认的在垂直方向上排成一列。默认值为false。
  • keyboardDismissMode enum(‘none’, “interactive”, ‘on-drag’)
    用户拖拽滚动视图的时候,是否要隐藏软键盘。none(默认值),拖拽时不隐藏软键盘。on-drag :当拖拽开始的时候隐藏软键盘。interactive:软键盘伴随拖拽操作同步地消失,并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项,会表现的和none一样。
  • keyboardShouldPersistTaps
    当此属性为false的时候,在软键盘激活之后,点击焦点文本输入框以外的地方,键盘就会隐藏。如果为true,滚动视图不会响应点击操作,并且键盘不会自动消失。默认值为false。
  • onScroll 在滚动的过程中,每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。
  • refreshControl element
    指定RefreshControl组件,用于为ScrollView提供下拉刷新功能。
  • removeClippedSubviews bool
    (实验特性):当此属性为true时,屏幕之外的子视图(子视图的overflow样式需要设为hidden)会被移除。这个可以提升大列表的滚动性能。默认值为true。
  • showsHorizontalScrollIndicator bool
    当此属性为true的时候,显示一个水平方向的滚动条。
  • showsVerticalScrollIndicator bool
    当此属性为true的时候,显示一个垂直方向的滚动条。
  • alwaysBounceHorizontal bool

当此属性为true时,水平方向即使内容比滚动视图本身还要小,也可以弹性地拉动一截。当horizontal={true}时默认值为true,否则为false。

三:轮播图
 

1.首先确定焦点图样式:
 


    this.onAnimatinonEnd(e)}
       //开始拖拽 
       onScrollBeginDrag = {()=>this.onScrollBeginDrag()}
       //停止拖拽
       onScrollEndDrag = {()=>this.onScrollEndDrag()}
       > 
       {this.renderAllImage()}
     
   {/*返回指示器 */}
   
       {this.renderPageCicle()}
   

二:然后展示图片

  注意图片地址目录:F:\wamp\www\07react JS\01\Hello\android\app\src\main\res\drawable,其中drawable是我自己创建的,里面的图片不能用数组开头,不能随意修改图片的后缀名(也就是不要把jpg格式改为png格式),否则编译的时候android报错。
 

    renderAllImage(){
        var allImage = [];
        //拿到图像数组
        var imgsArr = ImageData.data; 
        // console.log(imgsArr);
        for(var i=0; i
            )
        }
        return allImage;
    };

三:显示下面的五个小圆点
 

    renderPageCicle(){
        var indicatorArr = [];
        var ImgsArr = ImageData.data;
        var styleChange;
        for(var i=0; i
                    •
                
            )
        }
        return indicatorArr;
    };

四:当滚动一帧的时候调用

 也就是可以找出滚动的索引

    onAnimatinonEnd(e){
        //1.水平方向上的偏移量
        var offSetX = e.nativeEvent.contentOffset.x;
        //2.求出当前页数
        var currentPage = Math.floor(offSetX / width);
        console.log(currentPage);
        //3.更新状态机,重新绘制ui
        this.setState({
            currentPage:currentPage
        })
    }

 五:开启定时器,自动滚动

  我们要处理手指滑动的时候和滑动停止的时候滚动效果。其中复杂的处理关系在componentDidMount函数里执行,因为 在调用了render方法后,组件加载成功并被成功渲染出来以后,所要执行的后续操作,一般会在这个函数中处理网络请求等加载数据的操作;因为UI已经成功被渲染出来, 所以放在这个函数里进行请求操作,不会出现UI上的错误。

componentDidMount(){
        //开启定时器
        this.startTimer()
    };
        //开始拖拽
    onScrollBeginDrag(){
        //停止定时器
        console.log('beginDrag');
        clearInterval(this.timer) 
    };
    onScrollEndDrag(){ 
        console.log('endDrag');
        this.startTimer();
    }; 
    //开启定时器
    startTimer(){
        //1.拿到scrollView 
        var scrollView = this.refs.scrollView;
        var imageCount = ImageData.data.length;
        //2.添加定时器
        this.timer = setInterval(()=>{
            //2.1设置原点
            var activePage = 0;
            //2.2判断
            if((this.state.currentPage+1) >= imageCount){
                activePage = 0;
            }else{
                activePage = this.state.currentPage+1;
            }
            //2.3更新状态机
            this.setState({ 
                currentPage : activePage,
            }) 
            //2.4scrollView滚动起来
            var offsetX = activePage * width;
            scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:true});
        },this.props.duration); 
    };

 

你可能感兴趣的:(react.js,react,native,javascript)