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

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

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

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

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

5、方向的滾動(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)容的

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

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

8、y: 0。iosdecelerationRate number一個(gè)浮點(diǎn)數(shù)，用于決定當(dāng)用戶抬起手指之后，滾動(dòng)視圖停下的速度。常見的選項(xiàng)有：Normal: 0.998 (默認(rèn)值)Fast: 0.9iosdirectionalLockEnabled bool當(dāng)值為真時(shí)，滾動(dòng)視圖在拖拽的時(shí)候會鎖定只有垂直或水平方向可以滾動(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)滾動(dòng)動(dòng)畫結(jié)束之后調(diào)用此回調(diào)。iospagingEnabled bool當(dāng)值為true 時(shí)，滾動(dòng)條會停在滾動(dòng)視圖的尺寸的整數(shù)倍位置。這個(gè)可以用在水平分頁上。默認(rèn)值為false。iosscrollEnabled bool當(dāng)值為false 的時(shí)候，內(nèi)容不能滾動(dòng)，默認(rèn)值為true。iosscrollEventThrottle number這個(gè)屬性控制在滾動(dòng)過程中，scroll 事件被調(diào)用的頻率（是每秒事件數(shù)量）。更大的數(shù)值能夠更及時(shí)的滾動(dòng)位置，不過可能會帶來性能問題，因?yàn)榈男畔ㄟ^bridge 傳遞。默認(rèn)值為 0，意味著

10、每次視圖被滾動(dòng)，scroll事件只會被調(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。iosscrollsToTool當(dāng)此值為true 時(shí)，點(diǎn)擊狀態(tài)欄的時(shí)候視圖會滾動(dòng)到頂部。默認(rèn)值為 true。ioapToAlignment enum(start, center, end)當(dāng)設(shè)置了 snapToerval，snapToAlignment 會定義停駐點(diǎn)與滾動(dòng)視圖之間的關(guān)

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

12、rizontal=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)開始手動(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í)器類庫npm i react-timer-mixin -save在項(xiàng)目中需要引入并：引入： var TimerMixin = require(react-timer-mixin);：mixins: TimerMixin,2）在上下文中拿到組件需要給組件綁定ref