React Native - 09 - 滾動視圖

ScrollView是一個通用的滾動容器攻泼,可以托管多個組件和視圖揖赴⊙┪唬可滾動的項目不必是同質(zhì)的竭钝,你可以垂直和水平滾動(通過設(shè)置水平屬性)。

這個例子創(chuàng)建了一個垂直的ScrollView雹洗,圖像和文字混合在一起香罐。

import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
            <ScrollView>
                <Text style={{fontSize:96}}>Scroll me plz</Text>
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Text style={{fontSize:96}}>If you like</Text>
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Text style={{fontSize:96}}>Scrolling down</Text>
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Text style={{fontSize:96}}>What's the best</Text>
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Text style={{fontSize:96}}>Framework around?</Text>
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Image source={require('./img/favicon.png')} />
                <Text style={{fontSize:80}}>React Native</Text>
            </ScrollView>
        );
    }
}
image.png

可以將ScrollViews配置為允許使用滑動手勢通過使用pagingEnabled道具來分頁瀏覽。在視圖之間水平滑動也可以使用ViewPagerAndroid組件在Android上實現(xiàn)时肿。

帶有單個項目的滾動視圖可用于允許用戶縮放內(nèi)容庇茫。設(shè)置maximumZoomScale和minimumZoomScale道具,您的用戶將能夠使用捏和展開手勢來放大和縮小螃成。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末旦签,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子寸宏,更是在濱河造成了極大的恐慌宁炫,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件氮凝,死亡現(xiàn)場離奇詭異羔巢,居然都是意外死亡,警方通過查閱死者的電腦和手機罩阵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進(jìn)店門竿秆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人稿壁,你說我怎么就攤上這事袍辞。” “怎么了常摧?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長威创。 經(jīng)常有香客問我落午,道長,這世上最難降的妖魔是什么肚豺? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任溃斋,我火速辦了婚禮,結(jié)果婚禮上吸申,老公的妹妹穿的比我還像新娘梗劫。我一直安慰自己享甸,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布梳侨。 她就那樣靜靜地躺著蛉威,像睡著了一般。 火紅的嫁衣襯著肌膚如雪走哺。 梳的紋絲不亂的頭發(fā)上蚯嫌,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機與錄音丙躏,去河邊找鬼择示。 笑死,一個胖子當(dāng)著我的面吹牛晒旅,可吹牛的內(nèi)容都是我干的栅盲。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼废恋,長吁一口氣:“原來是場噩夢啊……” “哼谈秫!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起拴签,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤孝常,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蚓哩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體构灸,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年岸梨,在試婚紗的時候發(fā)現(xiàn)自己被綠了喜颁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡曹阔,死狀恐怖半开,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情赃份,我是刑警寧澤寂拆,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站抓韩,受9級特大地震影響纠永,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谒拴,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一尝江、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧英上,春花似錦炭序、人聲如沸啤覆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽窗声。三九已至,卻和暖如春彼妻,著一層夾襖步出監(jiān)牢的瞬間嫌佑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工侨歉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留屋摇,地道東北人。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓幽邓,卻偏偏與公主長得像炮温,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子牵舵,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355

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

  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)柒啤,沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 30,067評論 15 29
  • 原文鏈接:https://github.com/opendigg/awesome-github-android-u...
    IM魂影閱讀 32,940評論 6 472
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件畸颅、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,105評論 4 62
  • 簡介:她曾為他翻手為云覆手為雨担巩,一廂情愿的付出在她向他表明心跡之時,卻被毅然拒絕……她淚眼婆娑:“為了這個低賤的歌...
    一杯香草布丁閱讀 711評論 0 0
  • 時空星系没炒,是管理著三千小世界的時空大國涛癌,而每個小世界都會有一個男主和一個女主,但有時候會出現(xiàn)時空漏洞送火,這些漏洞的大...
    瀟諾閱讀 237評論 1 1