快捷搜索:

我们来看看它们的实现方式

图片 1RNScrollAndroid.gif图片 2RNScroll_ios.gif

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

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

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

  • 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; // 算出当前为第几页 var currentPage = Math.floor((offSetX / width)); this.setState({ currentPage: currentPage });}

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

图片 3scroll_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组件我们就学习完了。如有不对之处,还请各位拍砖。完整代码

本文由澳门新葡萄京8455官网发布于澳门新葡萄京8455官网,转载请注明出处:我们来看看它们的实现方式

您可能还会对下面的文章感兴趣: