轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50609194](http://blog.csdn.net/developer_jiangqq/article/details/50609194) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ? ? ??【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)????? ? ? ? 今天我們一起來看一下滾動視圖ScrollView組件的介紹和使用講解。 ?????????剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,React?Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! ?????????該組件封裝了Android平臺的ScrollView(滾動視圖)組件，并且提供觸摸事件"responder"系統功能。使用ScrollViews的時候我們必須要去確保該有一個固定的高度，因為該其實就是包含很多不固定高度的字控件裝入到固定的容器中(通過滑動交互)。如果我們要給ScrollView進行設置高度的話，要么我們直接給該ScrollView進行設置高度(注意該方法不建議哦)。另外一種方法是就是該ScrollView的父控件設置相關高度。使用第二種方法ScrollView中是不能加{flex:1},不然不會有效果的。 # (二)官方實例 ?????????首先我們來看一下官方的實例代碼,不過該代碼整體封裝性比較強，可能對于初學者來說初看起來還是有點問題的，不過后面我會寫一個例子的，具體代碼如下: ~~~ 'use strict'; var React =require('react-native'); var { ScrollView, StyleSheet, Text, TouchableOpacity } = React; var NUM_ITEMS = 20; var ScrollViewSimpleExample = React.createClass({ statics: { title: '<ScrollView>', description: 'Component that enablesscrolling through child components.' }, makeItems: function(nItems: number, styles):Array<any> { var items = []; for (var i = 0; i < nItems; i++) { items[i] = ( <TouchableOpacity key={i} style={styles}> <Text>{'Item ' +i}</Text> </TouchableOpacity> ); } return items; }, render: function() { // One of the items is a horizontal scrollview var items = this.makeItems(NUM_ITEMS,styles.itemWrapper); items[4] = ( <ScrollView key={'scrollView'} horizontal={true}> {this.makeItems(NUM_ITEMS,[styles.itemWrapper, styles.horizontalItemWrapper])} </ScrollView> ); var verticalScrollView = ( <ScrollViewstyle={styles.verticalScrollView}> {items} </ScrollView> ); return verticalScrollView; } }); var styles =StyleSheet.create({ verticalScrollView: { margin: 10, }, itemWrapper: { backgroundColor: '#dddddd', alignItems: 'center', borderRadius: 5, borderWidth: 5, borderColor: '#a52a2a', padding: 30, margin: 5, }, horizontalItemWrapper: { padding: 50 } }); module.exports =ScrollViewSimpleExample; ~~~ 運行效果如下圖：  # (三)屬性方法(這邊只關注通用以及Android平臺的) ??????? 3.1.View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式) ???????3.2.contentContainerStyle??樣式風格屬性(傳入StyleSheet創建的Style文件)。該樣式會作用于被ScrollView包裹的所有的子視圖。實例如下: ~~~ return ( <ScrollView contentContainerStyle={styles.contentContainer}> </ScrollView> ); … var styles = StyleSheet.create({ contentContainer:{ paddingVertical:20 } }); ~~~ ????? 3.3.horizontal???表示ScrollView是橫向滑動還是縱向滑動。該默認為false表示縱向滑動 ?????3.4.keyboardDismissMode???枚舉類型表示鍵盤隱藏類型，可選值('none', "interactive", 'on-drag')?三個值的意義分別如下: * none??默認值，表示在進行拖拽滑動的時候不隱藏鍵盤 * on-drag???表示在進行拖拽滑動開始的時候隱藏鍵盤 * interactive??表示當拖拽觸摸移動的同時隱藏鍵盤，向上拖拽的時候取消隱藏。不過在Android平臺上面該選項不支持，所以會和'none'一樣的效果。 ???? 3.5.keyboardShouldPersistTaps??該屬性默認為false，表示如果當前是textinput控件，并且鍵盤是彈出狀態的話，點擊textinput之外地方，會進行隱藏鍵盤。反之不會有效果，鍵盤還是成打開狀態。 ???? 3.6.onContentSizeChange??function??該當滾動視圖的內容尺寸大小發生變化的時候進行調用 ???? 3.7.onScroll? function??該方法在滾動的時候每frame(幀)調用一次。該方法事件調用的頻率可以使用scrollEventThrottle屬性進行設置。 ??? 3.8.refreshControl??element?設置元素控件，該可以進行指定RefreshControl組件。這樣可以為ScrollView添加下拉刷新的功能. ??? 3.9.removeClippedSubviews??測試屬性?當該值為true的時候。在ScrollView視圖之外的視圖(該視圖的overflow屬性值必須要為hidden)會從被暫時移除，該設置可以提高滾動的性能。 ?? 3.10.showsHorizontalScrollIndicator??該值設置是否需要顯示橫向滾動指示條 ?? 3.11.showsVerticalScrollIndicator?該值設置是否需要顯示縱向滾動指示條 ?? 3.12.sendMomentumEvents???當ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法設置，該sendMomentumEvents值設置為true的時候。變化的事件信息會通過該Android框架自動發送出來，然后之前設置的方法進行捕捉。 ??生下來的其他屬性方法都只適合于iOS平臺，這邊暫時不做相關講解。具體[請點擊查看官方文檔](http://facebook.github.io/react-native/docs/scrollview.html#content) (四)風格樣式 ???????對于風格樣式這塊，其實和View視圖中差不多的，大家可以[點擊進行查看View組件的介紹和詳解文章](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bview%E8%A7%86%E5%9B%BE%E8%AE%B2%E8%A7%A3/)???? * Flexbox... * ShadowPropTypesIOS#style…?? * Transforms... * backfaceVisibility enum('visible', 'hidden') * backgroundColor color * borderBottomColor color * borderBottomLeftRadius number * borderBottomRightRadius number * borderBottomWidth number * borderColor color * borderLeftColor color * borderLeftWidth number * borderRadius number * borderRightColor color * borderRightWidth number * borderStyle enum('solid', 'dotted', 'dashed') * borderTopColor color * borderTopLeftRadius number * borderTopRightRadius number * borderTopWidth number * borderWidth number * opacity number * overflow enum('visible', 'hidden') (五)使用實例 ???????以上我們對于ScrollView的介紹以及相關屬性方法以及樣式做了一定的介紹，下面我們來寫一個比較簡單的實例，來演示一下該ScrollView控件的基本使用。實例代碼如下: ~~~ /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, ScrollView, } from'react-native'; class ListViewDemo extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> 進行測試ScrollView控件 </Text> <ScrollView showsVerticalScrollIndicator={true} contentContainerStyle={styles.contentContainer}> <Text style={{color:'#FFF',margin:5,fontSize:16,backgroundColor:"blue"}}> Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu Shake or press menu button fordev menuShake or press menu button for dev menu </Text> </ScrollView> </View> ); } } const styles =StyleSheet.create({ container: { height:400, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, contentContainer: { margin:10, backgroundColor:"#ff0000", } }); AppRegistry.registerComponent('ScrollViewDemo', () => ScrollViewDemo); ~~~ 運行效果如下:  # (六)最后總結 ??????????今天我們主要學習一下ScrollView組件的介紹以及使用方法。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)  ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)