react native部分筆記常用組件之scrollview

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

2、ScrollView 中不要加flex:1。b）ScrollView的其他響應(yīng)者尚無法ScrollView 本身成為響應(yīng)者二、ScrollView 中常用的屬性contentContainerStyle StyleSheetPropType(ViewStylePropTypes)這些樣式會應(yīng)用到一個內(nèi)層的內(nèi)容容器上，所有的子視圖都會在內(nèi)容容器內(nèi)。horizontal bool當(dāng)此屬性為true 的時候，所有的的子視圖會在水平方向上排成一行，而不是默認(rèn)的在垂直方向上排成一列。默認(rèn)值為false。keyboardDismissMode enum(none,eractive, on-drag)用戶拖

3、拽滾動視圖的時候，是否要隱藏軟鍵盤。none（默認(rèn)值），拖拽時不隱藏軟鍵盤。on-drag 當(dāng)拖拽開始的時候隱藏軟鍵盤。eractive 軟鍵盤伴隨拖拽操作同步地，并且如果往上滑動會恢復(fù)鍵盤。安卓設(shè)備上不支持這個選項(xiàng)，會表現(xiàn)的和 none 一樣。keyboardShouldPersistTaps bool當(dāng)此屬性為false 的時候，在軟鍵盤激活之后，點(diǎn)擊焦點(diǎn)文本輸入框以外的地方，鍵盤就會隱藏。如果為true，滾動視圖不會響應(yīng)點(diǎn)擊操作，并且鍵盤不會自動。默認(rèn)值為false。onScroll function在滾動的過程中，每幀最多調(diào)用一次此回調(diào)函數(shù)。調(diào)用的頻率可以用scrollEventThr

4、ottle 屬性來控制。refreshControl element指定RefreshControl 組件，用于為ScrollView 提供下拉刷新功能。removeClippedSubviews bool（實(shí)驗(yàn)特性）：當(dāng)此屬性為true 時，屏幕之外的子視圖（子視圖的 overflow樣式需要設(shè)為 hidden）會被移除。這個可以大列表的滾動性能。默認(rèn)值為true。showsHorizontalScrollIndicator bool當(dāng)此屬性為true 的時候，顯示一個水平方向的滾動條。showsVerticalScrollIndicator bool當(dāng)此屬性為true 的時候，顯示一個垂直

5、方向的滾動條。alwaysBounceHorizontal bool當(dāng)此屬性為true 時，水平方向即使內(nèi)容比滾動視圖本身還要小，也可以彈性地拉動一截。當(dāng) horizontal=true時默認(rèn)值為 true，否則為false。iosalwaysBounceVertical bool當(dāng)此屬性為true 時，垂直方向即使內(nèi)容比滾動視圖本身還要小，也可以彈性地拉動一截。當(dāng) horizontal=true時默認(rèn)值為 false，否則為true。iosautomaticallyAdjustContentInsets bool如果滾動視圖放在一個導(dǎo)航條或者工具條后面的時候，iOS 系統(tǒng)是否要自動調(diào)整內(nèi)容的

6、范圍。默認(rèn)值為true。（譯注：如果你的ScrollView 或ListView 的頭部出現(xiàn)莫名其妙的空白，嘗試將此屬性置為false）iosbounbool當(dāng)值為true 時，如果內(nèi)容范圍比滾動視圖本身大，在到達(dá)內(nèi)容末尾的時候，可以彈性地拉動一截。如果為false，尾部的所有彈性都會被禁用，即使alwaysBounce*屬性為 true。默認(rèn)值為true。iosbounZoom bool當(dāng)值為true 時，使用手勢縮放內(nèi)容可以超過max 的限制，然后在手指抬起之后彈回max 的縮放比例。否則的話，縮放過限制。ioscanCancelContentTouches bool當(dāng)值為false 時，

7、一旦有子節(jié)點(diǎn)響應(yīng)觸摸操作，即使手指開始移動也不會拖動滾動視圖。默認(rèn)值為true（在以上情況下可以拖動滾動視圖。）ioscenterContent bool當(dāng)值為true 時，如果滾動視圖的內(nèi)容比視圖本身小，則會自動把內(nèi)容居中放置。當(dāng)內(nèi)容比滾動視圖大的時候，此屬性沒有作用。默認(rèn)值為 false。ioscontentInset top: number, left: number, bottom: number, right: number內(nèi)容范圍相對滾動視圖邊緣的坐標(biāo)。默認(rèn)為0, 0, 0, 0。ioscontentOffset PoPropType用來手動設(shè)置初始的滾動坐標(biāo)。默認(rèn)值為x: 0,

8、y: 0。iosdecelerationRate number一個浮點(diǎn)數(shù)，用于決定當(dāng)用戶抬起手指之后，滾動視圖停下的速度。常見的選項(xiàng)有：Normal: 0.998 (默認(rèn)值)Fast: 0.9iosdirectionalLockEnabled bool當(dāng)值為真時，滾動視圖在拖拽的時候會鎖定只有垂直或水平方向可以滾動。默認(rèn)值為false。iosumZoomScale number允許的最大縮放比例。默認(rèn)值為 1.0。iosminimumZoomScale number允許的最小縮放比例。默認(rèn)值為 1.0。iosonRefreshStart function已過期請使用 refreshContro

9、l 屬性代替。iosonScrollAnimationEnd function當(dāng)滾動動畫結(jié)束之后調(diào)用此回調(diào)。iospagingEnabled bool當(dāng)值為true 時，滾動條會停在滾動視圖的尺寸的整數(shù)倍位置。這個可以用在水平分頁上。默認(rèn)值為false。iosscrollEnabled bool當(dāng)值為false 的時候，內(nèi)容不能滾動，默認(rèn)值為true。iosscrollEventThrottle number這個屬性控制在滾動過程中，scroll 事件被調(diào)用的頻率（是每秒事件數(shù)量）。更大的數(shù)值能夠更及時的滾動位置，不過可能會帶來性能問題，因?yàn)榈男畔ㄟ^bridge 傳遞。默認(rèn)值為 0，意味著

10、每次視圖被滾動，scroll事件只會被調(diào)用一次。iosscrollIndicatorInsets top: number, left: number, bottom: number, right: number決定滾動條距離視圖邊緣的坐標(biāo)。這個值應(yīng)該和 contentInset 一樣。默認(rèn)值為0, 0, 0, 0。iosscrollsToTool當(dāng)此值為true 時，點(diǎn)擊狀態(tài)欄的時候視圖會滾動到頂部。默認(rèn)值為 true。ioapToAlignment enum(start, center, end)當(dāng)設(shè)置了 snapToerval，snapToAlignment 會定義停駐點(diǎn)與滾動視圖之間的關(guān)

11、系。start (默認(rèn)) 會將停駐點(diǎn)對齊在左側(cè)（水平）或頂部（垂直）center 會將停駐點(diǎn)對齊到中間end 會將停駐點(diǎn)對齊到右側(cè)（水平）或底部（垂直）ioapToerval number當(dāng)設(shè)置了此屬性時，會讓滾動視圖滾動停止后，停止在 snapToerval 的倍數(shù)的位置。這可以在一些子視圖比滾動視圖本身小的時候用于實(shí)現(xiàn)分頁顯示。與snapToAlignment 組合使用。iosstickyHeaderIndinumber一個子視圖下標(biāo)的數(shù)組，用于決定哪些成員會在滾動之后固定在屏幕頂端。舉個例子，傳遞 stickyHeaderIndi=0會讓第一個成員固定在滾動視圖頂端。這個屬性不能和 ho

12、rizontal=true一起使用。ioszoomScale number滾動視圖內(nèi)容初始的縮放比例。默認(rèn)值為 1.0。OnMomentumScrollEnd function當(dāng)一幀滾動完畢的時候調(diào)用，e.nativeEvent.contentOffset。onScrollBeginDrag fuction當(dāng)開始手動拖拽的時候調(diào)用。onScrollEndDrag fuction當(dāng)結(jié)束手動拖拽的時候調(diào)用。*注意：ScrollView 是繼承自View，所以View 中所有的屬性同樣適用于ScrollView。三、Demo 鞏固練習(xí)3.1 用scrollView 實(shí)現(xiàn)輪播圖效果技術(shù)實(shí)現(xiàn)要點(diǎn)1）需要導(dǎo)入計時器類庫npm i react-timer-mixin -save在項(xiàng)目中需要引入并：引入： var TimerMixin = require(react-timer-mixin);：mixins: TimerMixin,2）在上下文中拿到組件需要給組件綁定ref