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組件我們就學習完了。如有不對之處，還請各位拍磚。完整代碼
