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);

　　　　原文地址