React Native 学习之ScrollView：自动轮播图

Demo展示

RNScrollAndroid.gif RNScroll_ios.gif

Github上有两个实现轮播图的控件,一个是React-native-swiper，一个是react-native-viewpager，不过今天我们不是去使用它，而是自己简单的来实现这个效果。

Demo实现

<ScrollView
    ref="scrollView"
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    pagingEnabled={true}                  
    onMomentumScrollEnd={(scrollView)=>this.onAnimationEnd(scrollView)}
    onScrollBeginDrag={this.onScrollBeginDrag.bind(this)}
    onScrollEndDrag={this.onScrollEndDrag.bind(this)}           
>

我们来看看每一行属性的作用

• ref

  在界面中，如果想拿到一个组件的实例，我们可以通过ref来获取，也就是相当于Android当中的id。获取的方法就是：this.refs.xxx

• horizontal

  这个就很简单了，ScrollView滑动的方向有两个，一个是horizontal（水平方向），另一个默认是垂直方向滑动

• showsHorizontalScrollIndicator & showsVerticalScrollIndicator

  用来控制在滑动时是否显示滚动条

• pagingEnabled

  水平滑动时，可以出现分页效果，让一张图片刚好显示在屏幕上。若不设置的话，当滑动时可能会出几张图片都出现在屏幕上

• onMomentumScrollEnd

  监听一帧滚动完毕的时候的回调。我们可以通过这个属性，可以算出当前图片中的第几页，从而可以控制下面的圆点滚动。后面代码会讲到

• onScrollBeginDrag & onScrollEndDrag

  滑动开始和结束的回调。在本Demo中是用来开启和停止计时器。因为需要实现自动轮播，所以需用到计时器

View的渲染

在Demo中包含有两个View，一个是由ScrollView包裹的Image，还有一个是构成了圆点的Text，我们来看看它们的实现方式

 /**
 * 演染图片
 * @returns {Array}
 * @private
 */
_renderAllImage() {
    var imgArr = [];
    var imgData = this.props.imgData;
    for (var i in imgData) {
        imgArr.push(
            <Image
                key={i}
                source={{uri: imgData[i].icon}}
                style={{width: width, height: 140}}
            />
        )
    }
    return imgArr;
}

 /**
 * 渲染圆点指示器
 * @private
 */
_renderCircleIndicator() {

    var circleArr = [];
    var imgData = this.props.imgData;
    var style;
    for (var i in imgData) {
        style = i == this.state.currentPage ? {color: 'orange'} : {color: 'white'};
        circleArr.push(
            <Text key={i} style={[{fontSize: 25}, style]}>•</Text>
        );
    }

    return circleArr;
}

方法前加了一个下划线，表示这个方法是private的，然后圆点的表示方法是用"•" ，这个可以在html标签中查到。圆点的数量由Image的数量决定，当前currentPage为哪一张图片，对应的圆点就应该是orange，其他就为white。我们的圆点并没有包含在ScrollView中，而是通过样式来完成的。

    // 绝对定位
   position:'absolute',
   bottom:0,

改变圆点样式

那么在什么时候来改变圆点样式了？答案肯定是在一张图片滑动结束后来改变它。上面已经提到了，可以通过onMomentumScrollEnd属性来监听。那我们就来看看this.onAnimationEnd里同做了什么。

 /**
 * 当一页滑动结束时调用
 * @param scrollView
 */
onAnimationEnd(scrollView) {

    // 计算一页滑动的偏移量
    var offSetX = scrollView.nativeEvent.contentOffset.x;
    console.log(offSetX);
    // 算出当前为第几页
    var currentPage = Math.floor((offSetX / width));
    this.setState({
        currentPage: currentPage
    });
}

其实就只做了一件事，那就是算出当前图片是第几张，然后通过状态来改变currentPage的值进行重新渲染。我们可以来看看滑动时的偏移量的值的log:

scroll_offset_log.jpeg

显示第一张图片时的offset是从0到384，然后依此类推，当反方向滑回去时，是从1536一直到第一张时，offset就又变为0了。初始坐标值为左上角。

自动轮播

当我们在界面启动时就开启了图片自动轮播，也就是界面加载的时候我们需要开启计时器，那在哪里去开启计时器了？在RN中，对于一些耗时操作都会把它放到它生命周期中的一个方法内，这就好比于在Android，耗时操作只能放在子线程去操作。

 /**
 * 一般在此方法中处理一些耗时操作
 */
componentDidMount() {
    this._startTimer();

}

/**
 * 在界面被销毁时最好把计时器关掉，防止造成内存泄露
 */
componentWillUnMount() {
    clearInterval(this.interval);
}

我们再来看看开启计时器做了一些什么事：

/**
 * 开启定时器
 * @private
 */
_startTimer() {

    var scrollView = this.refs.scrollView;
    var imgCount = this.props.imgData.length;

    this.interval = setInterval(() => {

        //记录当前正在活动的图片
        var activePage = 0;
        if ((this.state.currentPage + 1) >= imgCount) { //防止越界
            activePage = 0;
        } else {
            activePage = this.state.currentPage + 1;
        }

        this.setState({
            currentPage: activePage
        });

        //让ScrollView动起来
        var offSetX = activePage * width;
        scrollView.scrollResponderScrollTo({x: offSetX, y: 0, animated: true});

    }, this.state.duration);
}

这里的this.interval就是一个隐式的全局变量，所以在clearInterval(this.interval);
方法可以直接拿到它。用一个变量来记录当前的活动的页，然后通过设置currentPage的状态来刷新View，
最后ScrollView自身滑动到指定的位置。

即开了计时器，我们又手动去滑动图片，此时我们还需要处理一些手动和自动不能并存的问题。其实很简单。只需要在手动时滑动停止计时器，松开时又开启计时器就可以解决。

/**
 * 开始拖拽时的回调
 * @private
 */
onScrollBeginDrag() {
    clearInterval(this.interval);
}

/**
 * 拖拽停止时的回调
 * @private
 */
onScrollEndDrag() {
    this._startTimer();
}

ScrollView还有几个比较常用的属性，虽然在本Demo中没有使用到，有哪些了？

• keyboardDismissMode 用户拖拽滚动视图的时候，是否要隐藏软键盘（枚举类型）

  • none（默认值），拖拽时不隐藏软键盘。

  • on-drag 当拖拽开始的时候隐藏软键盘。

  • interactive 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和none一样。

• keyboardShouldPersistTaps bool

  当此属性为false的时候，在软键盘激活之后，点击焦点文本输入框以外的地方，键盘就会隐藏。如果为true，滚动视图不会响应点击操作，并且键盘不会自动消失。默认值为false。

好了。ScrollView组件我们就学习完了。如有不对之处，还请各位拍砖。完整代码