React Native 中的 ScrollView 基本使用

最近老大想接了个项目 想让我们 通过React Native 来实现 等技术成熟后 把我们自己的APP 也通过React Native 来实现 这样既可以实现跨平台 又可以 实现热更新。

所以，近期看了React Native 中文网 开始尝试着写一点小功能的东西试试

闲话少叙 今天先从 ScrollView 开始：

        1、ScrollView介绍：ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。

       

2、ScrollView常用属性：

• horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。

• showsHorizontalScrollIndicator（布尔值）：当此属性为true的时候，显示一个水平方向的滚动条。

• showsVerticalScrollIndicator（布尔值）：与showsHorizontalScrollIndicator相对，当此属性为true的时候，显示一个垂直方向的滚动条。

• OnMomentumScrollEnd（function） ：当一帧滚动完毕的时候调用，e.nativeEvent.contentOffset，可以用来获取偏移量。

• onScrollBeginDrag（function） ：当开始手动拖拽的时候调用。

• onScrollEndDrag（function） ：当结束手动拖拽的时候调用。

• onScroll（function） ：在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。

      3、基于ScrollView的轮播图demo实例

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,

} from 'react-native';


//引入数据
let ImageData = require('../Resource/imgData.json');

let Dimensions = require('Dimensions');
let {width, height} = Dimensions.get('window');


export default class CirculateView extends Component {

    // 常量
    // props
    //
    // ES6中需要用在constructor中有super(props)来传递props。
    // ES6中getDefaultProps是class的属性而不是方法，不能定义在组件内部，需要单独写在外面。
    // 同理，ES6中propTypes也需要写在外面。
    //defaultProps
    static defaultProps = {

        //每隔多少秒执行一次
        duration:2000
    }


    //设置可变值和初始值
    // getInitialState(){  //ES5模式
    //     return {
    //         // 当前页
    //         currentPage: 0
    //     }
    // }
    constructor(props) { // 构造函数
        super(props);
        //ES6模式
        this.state = {
            currentPage: 0
        };

    }
    // 开始拖拽时调用
    onScrollerBeginDrag(){
        // 停止定时器
        clearInterval(this.timer);
    }

    // 停止拖拽时调用
    onScrollEndDrag(){
        // 开启定时器
        this.startTime();

    }

    // 复杂操作
    componentDidMount() {
    // debugger
        // 开启定时器
        this.startTime();

    }
    // 开启定时器
    startTime(){

        // 1.拿到scrollerView
        let scrollerView = this.refs.scrollerView;

        let imageCount = ImageData.data.length;

        // 2.添加定时器
        // 2.1 设置圆点
        let activePage = 0;

        this.timer = setInterval(() => {

            // 2.2 判断
            if((this.state.currentPage+1) >= imageCount){

                activePage = 0;
            }else {
                activePage = this.state.currentPage+1;
            }

            // 2.3 更新状态机
            this.setState({
                // 当前页
                currentPage: activePage
            })

            // 2.4 让scrollerVeiw滚动起来
            let offsetX = activePage * width;
            scrollerView.scrollTo({x: offsetX, y:0, animated:true});


        }, this.props.duration);

    }



    render(){
        return(
            <View style={styles.circulateViewStyle}>
                <ScrollView ref="scrollerView"
                            style={styles.scrollViewStyle}
                            // 水平滚动
                            horizontal={true}
                            // 是否显示水平滚动条
                            showsHorizontalScrollIndicator={false}
                            // 安页滚动
                            pagingEnabled={true}

                            //滚动动画结束时调用此函数
                            onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}

                            //开始拖拽
                            onScrollBeginDrag={(e)=>this.onScrollerBeginDrag(e)}

                            //停止拖拽
                            onScrollEndDrag={(e)=>this.onScrollEndDrag(e)}
                >

                    {this.creatImages()}

                </ScrollView>

                {/*底部页面指示器*/}
                <View style={styles.pageViewStyle}>

                    {/*返回5个圆点*/}
                    {this.renderPageIndex()}
                </View>

            </View>
        );
    }


    //返回所有的图片
    creatImages(){

        //数组
        let allImage = [];

        //拿到图形数组
        let imageArrs = ImageData.data;

        //遍历
        for (var i = 0; i < imageArrs.length; i++){

            //取出每一个单独的对象
            var imageItem = imageArrs[i];

            //创建组件放入数组
            allImage.push(
                <Image key={i} source={{uri: imageItem.img}} style={styles.imageStyle} >
                </Image>
            );
        }

        // 返回数组
        return allImage;
    }

    // 返回页面指示器的圆点
    renderPageIndex(){
        // 数组
        let indicatorArr = [];

        //拿到图形数组
        let imageArrs = ImageData.data;

        //样式
        var style;

        //遍历
        for (var i = 0; i < imageArrs.length; i++){

            // 判断
            style = (i==this.state.currentPage) ? {color: 'orange'} : {color: '#E8E8E8'}


            //放入圆点
            indicatorArr.push(
                // 多个样式使用[]数组来放
                <Text key={i} style={[{fontSize:25}, style]}>•</Text>
            );
        }
        //返回
        return indicatorArr;
    }

    // 当一帧滚动结束的时候调用
    onAnimationEnd(e){
        // 1.求出水平方向的偏移量
        var offsetX = e.nativeEvent.contentOffset.x;

        // 2.求出当前的页数         floor函数 取整
        var currentPage = Math.floor(offsetX / width);

        // 3.更新状态机
        this.setState({
            // 当前页
            currentPage: currentPage
        })

    }
}


const styles = StyleSheet.create({

    circulateViewStyle: {

        marginTop:20,
        height:150,
        width:width,
    },
    scrollViewStyle:{

    },

    imageStyle: {
        width: width,
        height: 150
    },
    pageViewStyle: {
        width:width,
        height:25,
        backgroundColor:'rgba(0, 0, 0, 0.4)',
        position:'absolute',
        bottom:0,
        flexDirection:'row',
        alignItems:'center'

    }

});

          4、数据支持

           json数据

{
  "data":
  [
    {
      "img":"img0",
      "title":"你那一笑倾国倾城"
    },
    {
      "img":"img1",
      "title":"那里记录了最唯美的爱情故事"
    },
    {
      "img":"img2",
      "title":"我怎么是个剩女"
    },
    {
      "img":"img3",
      "title":"生命中最后的四分钟"
    },
    {
      "img":"img4",
      "title":"我们都需要治疗"
    },
    {
      "img":"img5",
      "title":"这是一个美好的开始"
    },
    {
      "img":"img6",
      "title":"最后的晚宴"
    }
  ]
}

       5、效果图