React Native組件--ScrollView

ScrollView

<li>一個(gè)包裝了平臺(tái)的ScrollView(滾動(dòng)視圖)的組件,同時(shí)還集成了觸摸鎖定的“響應(yīng)者”系統(tǒng)。

<li>記住ScrollView必須有一個(gè)確定的高度才能正常工作瞳筏,因?yàn)樗鼘?shí)際上所做的就是將一系列不確定高度的子組件裝進(jìn)一個(gè)確定高度的容器(通過滾動(dòng)操作)。要給一個(gè)ScrollView確定一個(gè)高度的話,要么直接給它設(shè)置高度(不建議)蜘犁,要么確定所有的父容器都已經(jīng)綁定了高度。在視圖棧的任意一個(gè)位置忘記使用{flex:1}都會(huì)導(dǎo)致錯(cuò)誤止邮,你可以使用元素查看器來查找問題的原因这橙。

<li>ScrollView內(nèi)部的其他響應(yīng)者尚無法阻止ScrollView本身成為響應(yīng)者。

官方例子

class ScrollViewSample extends Component {
   render() {
     return 
     <ScrollView contentContainerStyle={styles.contentContainer}>
     </ScrollView>
   }
}

屬性

contentContainerStyle

這些樣式會(huì)應(yīng)用到一個(gè)內(nèi)層的內(nèi)容容器上导披,所有的子視圖都會(huì)包裹在內(nèi)容容器內(nèi)屈扎。<a>PS:ScrollView組件的屬性不能用style來設(shè)置,必須用這個(gè)屬性名稱</a>
否則:


Paste_Image.png

horizontal

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

keyboardDismissMode

用戶拖拽滾動(dòng)視圖的時(shí)候模蜡,是否要隱藏軟鍵盤。
<li><a>none</a>(默認(rèn)值)扁凛,拖拽時(shí)不隱藏軟鍵盤哩牍。
<li><a>on-drag</a> 當(dāng)拖拽開始的時(shí)候隱藏軟鍵盤。
<li><a>interactive</a> 軟鍵盤伴隨拖拽操作同步地消失令漂,并且如果往上滑動(dòng)會(huì)恢復(fù)鍵盤膝昆。

安卓設(shè)備上不支持這個(gè)選項(xiàng),會(huì)表現(xiàn)的和none一樣叠必。

keyboardShouldPersistTaps

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

removeClippedSubviews

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

showsHorizontalScrollIndicator

當(dāng)此屬性為true的時(shí)候辟犀,顯示一個(gè)水平方向的滾動(dòng)條俏竞。

showsVerticalScrollIndicator

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

<a>Android</a> endFillColor color

有時(shí)候滾動(dòng)視圖會(huì)占據(jù)比實(shí)際內(nèi)容更多的空間魂毁。這種情況下可以使用此屬性玻佩,指定以某種顏色來填充多余的空間,以避免設(shè)置背景和創(chuàng)建不必要的繪制開銷席楚。一般情況下并不需要這種高級(jí)優(yōu)化技巧咬崔。

<a>iOS</a> alwaysBounceHorizontal bool

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

<a>iOS</a> alwaysBounceVertical bool

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

<a>iOS</a> 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)

<a>iOS</a> bounces bool

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

<a>iOS</a> bouncesZoom bool

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

<a>iOS</a> 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)視圖片部。)

<a>iOS</a> 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。

<a>iOS</a> contentInset {top: number, left: number, bottom: number, right: number}

內(nèi)容范圍相對(duì)滾動(dòng)視圖邊緣的坐標(biāo)黍图。默認(rèn)為{0, 0, 0, 0}曾雕。

<a>iOS</a> contentOffset PointPropType

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

<a>iOS</a> decelerationRate number

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

<a>iOS</a> directionalLockEnabled bool

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

<a>iOS</a> maximumZoomScale number

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

<a>iOS</a> minimumZoomScale number

允許的最小縮放比例褒墨。默認(rèn)值為1.0炫刷。

<a>iOS</a> onRefreshStart function

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

<a>iOS</a> onScrollAnimationEnd function

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

pagingEnabled bool

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

<a>iOS</a> scrollEnabled bool

當(dāng)值為false的時(shí)候,內(nèi)容不能滾動(dòng)胃碾,默認(rèn)值為true涨享。

<a>iOS</a> 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)用一次栈源。

<a>iOS</a> scrollIndicatorInsets {top: number, left: number, bottom: number, right: number}

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

<a>iOS</a> scrollsToTop bool

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

<a>iOS</a> 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è)(水平)或底部(垂直)

<a>iOS</a> snapToInterval number

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

<a>iOS</a> stickyHeaderIndices [number]

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

<a>iOS</a> zoomScale number

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

方法

onScroll

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

onContentSizeChange

此函數(shù)會(huì)在ScrollView內(nèi)部可滾動(dòng)內(nèi)容的視圖發(fā)生變化時(shí)調(diào)用鳞仙。

調(diào)用參數(shù)為內(nèi)容視圖的寬和高:(contentWidth, contentHeight)

此方法是通過綁定在內(nèi)容容器上的onLayout來實(shí)現(xiàn)的寇蚊。

摘自:http://reactnative.cn/docs/0.27/getting-started.html#content

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市棍好,隨后出現(xiàn)的幾起案子仗岸,更是在濱河造成了極大的恐慌,老刑警劉巖借笙,帶你破解...
    沈念sama閱讀 211,265評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡月杉,警方通過查閱死者的電腦和手機(jī)横漏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來低散,“玉大人俯邓,你說我怎么就攤上這事∪酆牛” “怎么了稽鞭?”我有些...
    開封第一講書人閱讀 156,852評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長引镊。 經(jīng)常有香客問我朦蕴,道長篮条,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,408評(píng)論 1 283
  • 正文 為了忘掉前任吩抓,我火速辦了婚禮涉茧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘疹娶。我一直安慰自己降瞳,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評(píng)論 5 384
  • 文/花漫 我一把揭開白布蚓胸。 她就那樣靜靜地躺著挣饥,像睡著了一般。 火紅的嫁衣襯著肌膚如雪沛膳。 梳的紋絲不亂的頭發(fā)上扔枫,一...
    開封第一講書人閱讀 49,772評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音锹安,去河邊找鬼短荐。 笑死,一個(gè)胖子當(dāng)著我的面吹牛叹哭,可吹牛的內(nèi)容都是我干的忍宋。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼风罩,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼糠排!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起超升,我...
    開封第一講書人閱讀 37,688評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤入宦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后室琢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體乾闰,經(jīng)...
    沈念sama閱讀 44,130評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評(píng)論 2 325
  • 正文 我和宋清朗相戀三年盈滴,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了涯肩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,617評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡巢钓,死狀恐怖病苗,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情竿报,我是刑警寧澤铅乡,帶...
    沈念sama閱讀 34,276評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站烈菌,受9級(jí)特大地震影響阵幸,放射性物質(zhì)發(fā)生泄漏花履。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評(píng)論 3 312
  • 文/蒙蒙 一挚赊、第九天 我趴在偏房一處隱蔽的房頂上張望诡壁。 院中可真熱鬧,春花似錦荠割、人聲如沸妹卿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽夺克。三九已至,卻和暖如春嚎朽,著一層夾襖步出監(jiān)牢的瞬間铺纽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評(píng)論 1 265
  • 我被黑心中介騙來泰國打工哟忍, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狡门,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,315評(píng)論 2 360
  • 正文 我出身青樓锅很,卻偏偏與公主長得像其馏,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子爆安,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容