RN組件之ScrollView

一.ScrollView

　　該組件封裝了Android平臺的ScrollView(滾動組件),而且提供觸摸事件"responder"系統功能.使用ScrollView的時候

　　確保有一個固定的高度,由於這個控件其實就是把不少不固定高度的子控件裝入到固定的父容器中(經過滑動交互).

　　若是咱們要給ScrollView進行設置高度的話,要麼咱們直接ScrollView進行設置高度(不建議).另外一種方法就是給

　　ScrollView的父控件設置相關高度.使用第二種方法ScrollView中是不能加{fLex:1},否則不會有效果的.

　　1.屬性方法(通用和Android的)

　　　　(1)View相關屬性樣式所有繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)

　　　　(2)contentContainerStyle:樣式風格屬性(傳入StyleSheet建立的Style文件).該樣式會做用於被ScrollView

　　　　　　包裹的全部子視圖

　　　　(3)horizontal(bool):表示ScrollView是橫向滑動仍是縱向滑動.默認false表示縱向滑動

　　　　(4)keyboardDismissMode(enum):('none','interactive','on-drag')

　　　　　　none(默認值):拖拽時不隱藏軟鍵盤

　　　　　　on-drag:當拖拽開始的時候隱藏鍵盤

　　　　　　interactive:軟鍵盤伴隨拖拽操做同步地消失,而且若是往上滑動會恢復鍵盤.安卓設備不支持這個選項,

　　　　　　　　　　　　會表現的和none同樣.

　　　　(5)keyboardShouldPersiitTaps(bool):當此屬性爲false的時候,在軟鍵盤激活以後,點擊焦點文本框之外的

　　　　　　地方,鍵盤就會隱藏.若是爲true,滾動視圖不會響應點擊操做,而且鍵盤不會自動消失.默認值爲false.

　　　　(6)onScroll(function):在滾動的過程當中,每幀最多調用一次回調函數.調用的頻率能夠用

　　　　　　scrollEventThrottle屬性來控制

　　　　(7)refreshControl (element):指定RefershControl,用於爲ScrollView提供下拉刷新功能.

　　　　(8)removeClippedSubviews(bool):(實驗特性):當此屬性爲true時,屏幕以外的子視圖(子視圖的overflow

　　　　　　樣式須要設爲hidden)會被移除.這個能夠提高大列表的滾動性能.默認值爲true.

　　　　(9)showsHorizontalScollIndicator(bool):當此屬性爲true的時候,顯示一個水平方向的滾動條

　　　　(10)showsVerticalScrollIndicator(bool):當此屬性爲true的時候,顯示一個垂直方向的滾動條

　　　　2.style樣式

　　　　　　(1)Flexbox...

　　　　　　(2)Transforms...

　　　　　　(3)backfaceVisibility enum('visible','hidden')

　　　　　　(4)borderColor string

　　　　　　(5)borderTopColor string

　　　　　　(6)borderRightColor string

　　　　　　(7)borderBottomColor string

　　　　　　(8)borderLeftColor string

　　　　　　(9)borderRadius number

　　　　　　.....

　　　　　　官方文檔

　　　　　　　

 　　　　　代碼示例:

　　　　　　　　

 1 'user strict'
 2 const React =require('react-native');
 3 const {
 4     AppRegistry,
 5     ScrollView,
 6     StyleSheet,
 7     RefreshControl,
 8     Text,
 9     View,
10     }=React;
11 const styles=StyleSheet.create({
12     row:{
13         borderColor:'red',
14         borderWidth:5,
15         padding:5,
16         backgroundColor:'#3a5795',
17         margin:5,
18     },
19     text:{
20         alignSelf:'center',
21         color:'#fff',
22     },
23     scrollview:{
24         flex:1,
25     }
26 });
27 
28 const Row =React.createClass({
29     //誤導新手啊,這句沒用啊...
30   /*  _onClick:function (){
31         this.props.onClick(this.props.data);
32    },*/
33     render:function(){
34         return (
35             <View style={styles.row}>
36                 <Text style={styles.text}>
37                     {this.props.data.text}
38                 </Text>
39             </View>
40         );
41     },
42 });
43 
44 const RefreshControlDemo =React.createClass({
45     getInitialState(){
46         return {
47             isRefreshing:false,
48             loaded:0,
49             rowData:Array.from(new Array(20)).map(
50                 (val,i) =>({text:"初始行"+i})
51             ),
52         };
53     },
54     render(){
55         const rows=this.state.rowData.map((row,ii) =>{
56             return <Row key={ii} data={row}/>
57         });
58         return(
59             <ScrollView
60                 style={styles.scrollview}
61                 refreshControl={
62                     <RefreshControl
63                         refreshing={this.state.isRefreshing}
64                         onRefresh={this._onRefresh}
65                         colors={['#ff0000','#00ff00']}
66                         progressBackgroundColor="#ffffff"
67                     />
68                 }>
69                 {rows}
70             </ScrollView>
71         );
72     },
73 
74 
75     _onRefresh(){
76         this.setState({isRefreshing:true});
77         setTimeout(() =>{
78             //準備下拉刷新的5條數據
79             const rowData =Array.from(new Array(5))
80             .map((val,i) =>({
81                 text:'刷新行'+(+this.state.loaded+i)
82             }))
83                 .concat(this.state.rowData);
84             this.setState({
85                 loaded:this.state.loaded+5,
86                 isRefreshing:false,
87                 rowData:rowData,
88             });
89         },2000);
90     },
91 });
92 
93 AppRegistry.registerComponent('MyProject2', () => RefreshControlDemo);

View Code

　　　　原文地址