React Native組件之ScrollView和 StatusBar

ScrollView必須有一個(gè)確定的高度才能正常工作
它實(shí)際上所做的就是將一系列不確定高度的子組件裝進(jìn)一個(gè)確定高度的容器(通過滾動(dòng)操作)。

通常有兩種做法:

第一種: 直接給該ScrollView進(jìn)行設(shè)置高度(不建議);
第二種: ScrollView中不要加{flex:1}。
ScrollView內(nèi)部的其他響應(yīng)者尚無法阻止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')
用戶拖拽滾動(dòng)視圖的時(shí)候,是否要隱藏軟鍵盤。
none(默認(rèn)值),拖拽時(shí)不隱藏軟鍵盤。
on-drag 當(dāng)拖拽開始的時(shí)候隱藏軟鍵盤。
interactive 軟鍵盤伴隨拖拽操作同步地消失,并且如果往上滑動(dòng)會(huì)恢復(fù)鍵盤。安卓設(shè)備上不支持這個(gè)選項(xiàng),會(huì)表現(xiàn)的和none一樣。

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

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。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[ios] snapToAlignment 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è)(水平)或底部(垂直)

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

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

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

二、ScrollView中常用的方法

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

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

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。

<ScrollView horizontal={true} //排列方向:橫向 默認(rèn)false縱向 showsHorizontalScrollIndicator={false} //隱藏水平線 pagingEnabled={true} //分頁滑動(dòng) iOS // scrollEnabled={false} //是否滾動(dòng) iOS bounces={false} //關(guān)閉彈簧效果 iOS onScrollBeginDrag={()=>this.beginDrag()} //開始滑動(dòng)時(shí)調(diào)用 onScrollEndDrag={()=>this.endDrag()} //結(jié)束滑動(dòng)時(shí)調(diào)用 onMomentumScrollEnd={()=>this.momentumScroll()} //當(dāng)一幀滑動(dòng)完畢后調(diào)用 >

StatusBar

 <StatusBar
                   // hidden = {true}  //status顯示與隱藏
                   // backgroundColor = 'red'  //status欄背景色,僅支持安卓
                   // translucent = {true} //設(shè)置status欄是否透明效果,僅支持安卓
                   //  barStyle = 'light-content' //設(shè)置狀態(tài)欄文字效果,僅支持iOS,枚舉類型:default黑light-content白
                    networkActivityIndicatorVisible = {true} //設(shè)置狀態(tài)欄上面的網(wǎng)絡(luò)進(jìn)度菊花,僅支持iOS
                    showHideTransition = 'slide' //顯隱時(shí)的動(dòng)畫效果.默認(rèn)fade
                />
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容