Demo展示
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:
显示第一张图片时的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组件我们就学习完了。如有不对之处，还请各位拍砖。完整代码
