ReactNative中ScrollView組件

關於ScrollView

• ScrollView是一個通用的可滾動的控件，可以放入多個組件和視圖，而且這些組件並不需要是同類型的。ScrollView不僅可以垂直滾動，還能水平滾動
• 一般使用ScrollView滿足倆點即可
  
  • ScrollView必須有一個確定的高度才能正常工作
    將一系列不確定高度的子組件裝進一個確定高度的容器（通過滾動操作）
    通常有兩種做法：
    1、 直接給該ScrollView進行設置高度(不建議)；
    2、 ScrollView中不要加{flex:1}。
  • ScrollView內部的其他響應者尚無法阻止ScrollView本身成爲響應者

常用屬性

• contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
  這些樣式會應用到一個內層的內容容器上，所有的子視圖都會包裹在內容容器內。

• horizontal bool
  當此屬性爲true的時候，所有的的子視圖會在水平方向上排成一行，而不是默認的在垂直方向上排成一列。默認值爲false。

• keyboardDismissMode enum(‘none’, “interactive”, ‘on-drag’)
  用戶拖拽滾動視圖的時候，是否要隱藏軟鍵盤。

  • none（默認值），拖拽時不隱藏軟鍵盤。

  • on-drag 當拖拽開始的時候隱藏軟鍵盤。

  • interactive 軟鍵盤伴隨拖拽操作同步地消失，並且如果往上滑動會恢復鍵盤。安卓設備上不支持這個選項，會表現的和none一樣。

• keyboardShouldPersistTaps bool
  當此屬性爲false的時候，在軟鍵盤激活之後，點擊焦點文本輸入框以外的地方，鍵盤就會隱藏。如果爲true，滾動視圖不會響應點擊操作，並且鍵盤不會自動消失。默認值爲false。

• onScroll function
  在滾動的過程中，每幀最多調用一次此回調函數。調用的頻率可以用scrollEventThrottle屬性來控制。

• refreshControl element
  指定RefreshControl組件，用於爲ScrollView提供下拉刷新功能。

• removeClippedSubviews bool
  （實驗特性）：當此屬性爲true時，屏幕之外的子視圖（子視圖的overflow樣式需要設爲hidden）會被移除。這個可以提升大列表的滾動性能。默認值爲true。

• showsHorizontalScrollIndicator bool
  當此屬性爲true的時候，顯示一個水平方向的滾動條。

• showsVerticalScrollIndicator bool
  當此屬性爲true的時候，顯示一個垂直方向的滾動條。

• alwaysBounceHorizontal bool
  當此屬性爲true時，水平方向即使內容比滾動視圖本身還要小，也可以彈性地拉動一截。當horizontal={true}時默認值爲true，否則爲false。

• OnMomentumScrollEnd function
  當一幀滾動完畢的時候調用，e.nativeEvent.contentOffset。
• onScrollBeginDrag fuction
  當開始手動拖拽的時候調用。
• onScrollEndDrag fuction
  當結束手動拖拽的時候調用。

注意：ScrollView是繼承自View，所以View中所有的屬性同樣適用於ScrollView。

export default class App4 extends Component<{}> {
    render() {
      return (
        <View style={styles.container}>
            <ScrollView 
                horizontal={true}
                showsHorizontalScrollIndicator = {false}
                pagingEnabled = {true}>
                {this.setUP()}
            </ScrollView>
        </View>
      );
    }s

    setUP(){

        var viewArr = [];
        var colorArr = ['red','green','blue','yellow','purple'];
        for (let i = 0; i < 5; i++) {

            viewArr.push(
                <View key = {i} style = {{backgroundColor:colorArr[i],width:375,height:150}}>
                   <Text>{i}</Text>
                 </View>
            )
        }
        return viewArr;
    }
};

const styles = StyleSheet.create({
    container:{
        flex:1,      
        backgroundColor:'white',
    },
});