一、前言

從iOS開(kāi)發(fā)的經(jīng)驗(yàn)來(lái)看，scrollView無(wú)疑是移動(dòng)開(kāi)發(fā)中很重要的一個(gè)組件，比如后面會(huì)學(xué)到的ListView就是繼承自它。那么，在開(kāi)發(fā)中比如：焦點(diǎn)圖、引導(dǎo)頁(yè)等地方都有其的影子，那接下來(lái)我們一起來(lái)搞定它！
一個(gè)包裝了平臺(tái)的ScrollView（滾動(dòng)視圖）的組件，同時(shí)還集成了觸摸鎖定的“響應(yīng)者”系統(tǒng)。
兩個(gè)要點(diǎn)：
a）ScrollView必須有一個(gè)確定的高度才能正常工作
它實(shí)際上所做的就是將一系列不確定高度的子組件裝進(jìn)一個(gè)確定高度的容器（通過(guò)滾動(dòng)操作）。
通常有兩種做法：
第一種： 直接給該ScrollView進(jìn)行設(shè)置高度(不建議)；
第二種： ScrollView中不要加{flex:1}。
b）ScrollView內(nèi)部的其他響應(yīng)者尚無(wú)法阻止ScrollView本身成為響應(yīng)者

二、ScrollView中常用的屬性

contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
這些樣式會(huì)應(yīng)用到一個(gè)內(nèi)層的內(nèi)容容器上，所有的子視圖都會(huì)包裹在內(nèi)容容器內(nèi)。

horizontal bool 
當(dāng)此屬性為true的時(shí)候，所有的的子視圖會(huì)在水平方向上排成一行，而不是默認(rèn)的在垂直方向上排成一列。默認(rèn)值為false。

keyboardDismissMode enum('none', "interactive", 'on-drag') 
用戶(hù)拖拽滾動(dòng)視圖的時(shí)候，是否要隱藏軟鍵盤(pán)。
?   none（默認(rèn)值），拖拽時(shí)不隱藏軟鍵盤(pán)。
?   on-drag 當(dāng)拖拽開(kāi)始的時(shí)候隱藏軟鍵盤(pán)。
?   interactive 軟鍵盤(pán)伴隨拖拽操作同步地消失，并且如果往上滑動(dòng)會(huì)恢復(fù)鍵盤(pán)。安卓設(shè)備上不支持這個(gè)選項(xiàng)，會(huì)表現(xiàn)的和none一樣。

keyboardShouldPersistTaps bool 
當(dāng)此屬性為false的時(shí)候，在軟鍵盤(pán)激活之后，點(diǎn)擊焦點(diǎn)文本輸入框以外的地方，鍵盤(pán)就會(huì)隱藏。如果為true，滾動(dòng)視圖不會(huì)響應(yīng)點(diǎn)擊操作，并且鍵盤(pán)不會(huì)自動(dòng)消失。默認(rèn)值為false。

onScroll function 
在滾動(dòng)的過(guò)程中，每幀最多調(diào)用一次此回調(diào)函數(shù)。調(diào)用的頻率可以用scrollEventThrottle屬性來(lái)控制。

refreshControl element 
指定RefreshControl組件，用于為ScrollView提供下拉刷新功能。

removeClippedSubviews bool 
（實(shí)驗(yàn)特性）：當(dāng)此屬性為true時(shí)，屏幕之外的子視圖（子視圖的overflow樣式需要設(shè)為hidden）會(huì)被移除。這個(gè)可以提升大列表的滾動(dòng)性能。默認(rèn)值為true。

showsHorizontalScrollIndicator bool 
當(dāng)此屬性為true的時(shí)候，顯示一個(gè)水平方向的滾動(dòng)條。

showsVerticalScrollIndicator bool 
當(dāng)此屬性為true的時(shí)候，顯示一個(gè)垂直方向的滾動(dòng)條。

alwaysBounceHorizontal bool 
當(dāng)此屬性為true時(shí)，水平方向即使內(nèi)容比滾動(dòng)視圖本身還要小，也可以彈性地拉動(dòng)一截。當(dāng)horizontal={true}時(shí)默認(rèn)值為true，否則為false。

iosalwaysBounceVertical bool 
當(dāng)此屬性為true時(shí)，垂直方向即使內(nèi)容比滾動(dòng)視圖本身還要小，也可以彈性地拉動(dòng)一截。當(dāng)horizontal={true}時(shí)默認(rèn)值為false，否則為true。

iosautomaticallyAdjustContentInsets bool 
如果滾動(dòng)視圖放在一個(gè)導(dǎo)航條或者工具條后面的時(shí)候，iOS系統(tǒng)是否要自動(dòng)調(diào)整內(nèi)容的范圍。默認(rèn)值為true。（譯注：如果你的ScrollView或ListView的頭部出現(xiàn)莫名其妙的空白，嘗試將此屬性置為false）

iosbounces bool 
當(dāng)值為true時(shí)，如果內(nèi)容范圍比滾動(dòng)視圖本身大，在到達(dá)內(nèi)容末尾的時(shí)候，可以彈性地拉動(dòng)一截。如果為false，尾部的所有彈性都會(huì)被禁用，即使alwaysBounce*屬性為true。默認(rèn)值為true。

iosbouncesZoom bool 
當(dāng)值為true時(shí)，使用手勢(shì)縮放內(nèi)容可以超過(guò)min/max的限制，然后在手指抬起之后彈回min/max的縮放比例。否則的話(huà)，縮放不能超過(guò)限制。

ioscanCancelContentTouches bool 
當(dāng)值為false時(shí)，一旦有子節(jié)點(diǎn)響應(yīng)觸摸操作，即使手指開(kāi)始移動(dòng)也不會(huì)拖動(dòng)滾動(dòng)視圖。默認(rèn)值為true（在以上情況下可以拖動(dòng)滾動(dòng)視圖。）

ioscenterContent bool 
當(dāng)值為true時(shí)，如果滾動(dòng)視圖的內(nèi)容比視圖本身小，則會(huì)自動(dòng)把內(nèi)容居中放置。當(dāng)內(nèi)容比滾動(dòng)視圖大的時(shí)候，此屬性沒(méi)有作用。默認(rèn)值為false。

ioscontentInset {top: number, left: number, bottom: number, right: number} 
內(nèi)容范圍相對(duì)滾動(dòng)視圖邊緣的坐標(biāo)。默認(rèn)為{0, 0, 0, 0}。

ioscontentOffset PointPropType 
用來(lái)手動(dòng)設(shè)置初始的滾動(dòng)坐標(biāo)。默認(rèn)值為{x: 0, y: 0}。

iosdecelerationRate number 
一個(gè)浮點(diǎn)數(shù)，用于決定當(dāng)用戶(hù)抬起手指之后，滾動(dòng)視圖減速停下的速度。常見(jiàn)的選項(xiàng)有：
?   Normal: 0.998 (默認(rèn)值)
?   Fast: 0.9

iosdirectionalLockEnabled bool 
當(dāng)值為真時(shí)，滾動(dòng)視圖在拖拽的時(shí)候會(huì)鎖定只有垂直或水平方向可以滾動(dòng)。默認(rèn)值為false。

iosmaximumZoomScale number 
允許的最大縮放比例。默認(rèn)值為1.0。

iosminimumZoomScale number 
允許的最小縮放比例。默認(rèn)值為1.0。

iosonRefreshStart function 
已過(guò)期
請(qǐng)使用refreshControl 屬性代替。

iosonScrollAnimationEnd function 
當(dāng)滾動(dòng)動(dòng)畫(huà)結(jié)束之后調(diào)用此回調(diào)。

iospagingEnabled bool 
當(dāng)值為true時(shí)，滾動(dòng)條會(huì)停在滾動(dòng)視圖的尺寸的整數(shù)倍位置。這個(gè)可以用在水平分頁(yè)上。默認(rèn)值為false。

iosscrollEnabled bool 
當(dāng)值為false的時(shí)候，內(nèi)容不能滾動(dòng)，默認(rèn)值為true。

iosscrollEventThrottle number 
這個(gè)屬性控制在滾動(dòng)過(guò)程中，scroll事件被調(diào)用的頻率（單位是每秒事件數(shù)量）。更大的數(shù)值能夠更及時(shí)的跟蹤滾動(dòng)位置，不過(guò)可能會(huì)帶來(lái)性能問(wèn)題，因?yàn)楦嗟男畔?huì)通過(guò)bridge傳遞。默認(rèn)值為0，意味著每次視圖被滾動(dòng)，scroll事件只會(huì)被調(diào)用一次。

iosscrollIndicatorInsets {top: number, left: number, bottom: number, right: number} 
決定滾動(dòng)條距離視圖邊緣的坐標(biāo)。這個(gè)值應(yīng)該和contentInset一樣。默認(rèn)值為{0, 0, 0, 0}。

iosscrollsToTop bool 
當(dāng)此值為true時(shí)，點(diǎn)擊狀態(tài)欄的時(shí)候視圖會(huì)滾動(dòng)到頂部。默認(rèn)值為true。

iossnapToAlignment enum('start', "center", 'end') 
當(dāng)設(shè)置了snapToInterval，snapToAlignment會(huì)定義停駐點(diǎn)與滾動(dòng)視圖之間的關(guān)系。
?   start (默認(rèn)) 會(huì)將停駐點(diǎn)對(duì)齊在左側(cè)（水平）或頂部（垂直）
?   center 會(huì)將停駐點(diǎn)對(duì)齊到中間
?   end 會(huì)將停駐點(diǎn)對(duì)齊到右側(cè)（水平）或底部（垂直）

iossnapToInterval number 
當(dāng)設(shè)置了此屬性時(shí)，會(huì)讓滾動(dòng)視圖滾動(dòng)停止后，停止在snapToInterval的倍數(shù)的位置。這可以在一些子視圖比滾動(dòng)視圖本身小的時(shí)候用于實(shí)現(xiàn)分頁(yè)顯示。與snapToAlignment組合使用。

iosstickyHeaderIndices [number] 
一個(gè)子視圖下標(biāo)的數(shù)組，用于決定哪些成員會(huì)在滾動(dòng)之后固定在屏幕頂端。舉個(gè)例子，傳遞stickyHeaderIndices={[0]}會(huì)讓第一個(gè)成員固定在滾動(dòng)視圖頂端。這個(gè)屬性不能和horizontal={true}一起使用。

ioszoomScale number 
滾動(dòng)視圖內(nèi)容初始的縮放比例。默認(rèn)值為1.0。

OnMomentumScrollEnd  function
當(dāng)一幀滾動(dòng)完畢的時(shí)候調(diào)用，

e.nativeEvent.contentOffset。
onScrollBeginDrag  fuction
當(dāng)開(kāi)始手動(dòng)拖拽的時(shí)候調(diào)用。

onScrollEndDrag  fuction
當(dāng)結(jié)束手動(dòng)拖拽的時(shí)候調(diào)用。

注意：ScrollView是繼承自View，所以View中所有的屬性同樣適用于ScrollView。

三、Demo鞏固練習(xí)

3.1 用scrollView實(shí)現(xiàn)輪播圖效果
技術(shù)實(shí)現(xiàn)要點(diǎn)
1）需要導(dǎo)入計(jì)時(shí)器類(lèi)庫(kù)
npm i react-timer-mixin --save
在項(xiàng)目中需要引入并注冊(cè)：
引入： var TimerMixin = require('react-timer-mixin');
注冊(cè)：mixins: [TimerMixin],
2）在上下文中拿到組件需要給組件綁定ref

圖片 1.png

3）根據(jù)上下文求出偏移量

e.nativeEvent.contentOffset.x;

4）讓scrollView根據(jù)偏移量進(jìn)行滾動(dòng)

var currentX = activePage * screenWidth;
scrollView.scrollResponderScrollTo({x:currentX, y:0, animated:true});

3.2 詳細(xì)代碼截圖如下
核心代碼如下：

圖片 2.png

圖片 3.png

圖片 4.png

圖片 5.png

運(yùn)行效果截圖：

圖片 6.png