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

　　　　　　.....

　　　　　　官方文档

　　　　　　　

　　　　　代码示例:

　　　　　　　　

 'user strict'
 const React =require('react-native');
 const {
     AppRegistry,
     ScrollView,
     StyleSheet,
     RefreshControl,
     Text,
     View,
     }=React;
 const styles=StyleSheet.create({
     row:{
         borderColor:'red',
         borderWidth:5,
         padding:5,
         backgroundColor:'#3a5795',
         margin:5,
     },
     text:{
         alignSelf:'center',
         color:'#fff',
     },
     scrollview:{
         flex:1,
     }
 });

 const Row =React.createClass({
     //误导新手啊,这句没用啊...
   /*  _onClick:function (){
         this.props.onClick(this.props.data);
    },*/
     render:function(){
         return (
             <View style={styles.row}>
                 <Text style={styles.text}>
                     {this.props.data.text}
                 </Text>
             </View>
         );
     },
 });

 const RefreshControlDemo =React.createClass({
     getInitialState(){
         return {
             isRefreshing:false,
             loaded:0,
             rowData:Array.from(new Array(20)).map(
                 (val,i) =>({text:"初始行"+i})
             ),
         };
     },
     render(){
         const rows=this.state.rowData.map((row,ii) =>{
             return <Row key={ii} data={row}/>
         });
         return(
             <ScrollView
                 style={styles.scrollview}
                 refreshControl={
                     <RefreshControl
                         refreshing={this.state.isRefreshing}
                         onRefresh={this._onRefresh}
                         colors={['#ff0000','#00ff00']}
                         progressBackgroundColor="#ffffff"
                     />
                 }>
                 {rows}
             </ScrollView>
         );
     },

     _onRefresh(){
         this.setState({isRefreshing:true});
         setTimeout(() =>{
             //准备下拉刷新的5条数据
             const rowData =Array.from(new Array(5))
             .map((val,i) =>({
                 text:'刷新行'+(+this.state.loaded+i)
             }))
                 .concat(this.state.rowData);
             this.setState({
                 loaded:this.state.loaded+5,
                 isRefreshing:false,
                 rowData:rowData,
             });
         },2000);
     },
 });

 AppRegistry.registerComponent('MyProject2', () => RefreshControlDemo);

　　　　原文地址