免費開源的iOS開發學習平臺

React Native基礎:14-ScrollView組件

ScrollView組件簡介

ScrollView組件是一個可以滾動的視圖,它可以支持上下方向以及左右方法進行滾動。由于手機屏幕大小有限,通常情況下,不能在一屏幕內展示完整的界面,特別是針對微博、今日頭條之類的應用,其內容都來自于服務器,可以說其展示的內容長度是無窮無盡的。因此只能讓用戶通過滾動操作來進行內容瀏覽,此時需要借助ScrollView組件。

除了用來展示列表信息,ScrollView組件最常見的到地方就是手機上的瀏覽器頁面。ScrollView組件對于內存性能沒有優化。所有組件上的子組件都會被加載到內存中,因此主要在顯示內容不是特別多的情況下使用。

ScrollView組件有兩個滾動方向,豎直滾動和水平滾動。ScrollView組件在豎直滾動的時候,需要明確的知道它內容的高度。ScrollView組件在水平滾動的時候,需要明確知道它內容的寬度。

在ScrollView組件中,提供了一個重要方法,可以滾動到指定的位置。在下面的方法中,可以指定x與y值,即滾動到指定的x,y偏移處,第三個參數為是否啟用平滑滾動動畫。

scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)

ScrollView組件常用屬性

ScrollView組件中提供了如下一些常用的屬性和方法,可以對ScrollView組件的樣式進行定制,同時可以監控ScrollView組件與用戶進行交互的行為,從而可以在用戶交互過程中添加額外的功能。

| 屬性 | 類型| 值 |
| --- | --- | --- |
onScroll |function |在滾動的過程中,每幀最多調用一次此回調函數。調用的頻率可以用scrollEventThrottle屬性來控制。|
contentOffset |PointPropType |用來手動設置初始的滾動坐標。默認值為{x: 0, y: 0}。|
| pagingEnabled |bool | 當值為true時,滾動條會停在滾動視圖的尺寸的整數倍位置。這個可以用在水平分頁上。默認值為false。 |
| showsHorizontalScrollIndicator |bool | 當此屬性為true的時候,顯示一個水平方向的滾動條。 |
| showsVerticalScrollIndicator |bool | 當此屬性為true的時候,顯示一個垂直方向的滾動條。 |
| scrollEnabled |bool | 當值為false的時候,內容不能滾動,默認值為true。 |
| maximumZoomScale |number | 允許的最大縮放比例。默認值為1.0。 |
| minimumZoomScale |number | 允許的最小縮放比例。默認值為1.0。 |
| stickyHeaderIndices |[number] | 一個子視圖下標的數組,用于決定哪些成員會在滾動之后固定在屏幕頂端。舉個例子,傳遞stickyHeaderIndices={[

示例代碼

現在我們來編寫一個簡單的示例代碼,在ScrollView組件中存放200個Text組件。最終的效果是手機屏幕上展示200條文本,可以用手指上下滑動來進行瀏覽。

  • 在終端中執行如下命令,創建ScrollViewDemo工程;
react-native init ScrollViewDemo
  • 使用Atom打開工程的index.ios.js文件,編寫組件所使用的樣式;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    paddingTop: 20,
  },
  verticalScrollView: {
    flex: 1,
    margin: 10,
  },
});
  • 在一個ScrollView組件中添加200個Text組件;
var NUM_ITEMS = 200;

export default class ScrollViewDemo extends Component {
  makeItems(nItems: number, styles) {
    var items = [];
    for (var i = 0; i < nItems; i++) {
       items[i] = (
         <Text key={i}>{'這是第 ' + i + '行'}</Text>
       );
    }
    return items;
  };

  render() {
    var items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
    var verticalScrollView = (
      <ScrollView style={styles.verticalScrollView}>
        {items}
      </ScrollView>
    );

    var view = (
      <View style={styles.container}>
        {verticalScrollView}
      </View>
    )
    return view;
  }
}
  • 使用import加載項目所使用的模塊,并且注冊組件ScrollViewDemo成為整個應用的根容器
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
} from 'react-native';

AppRegistry.registerComponent('ScrollViewDemo', () => ScrollViewDemo);
  • 在終端中執行下面的命令運行程序,在iOS模擬器中可以看到ScrollView組件中添加的Text組件,并且可以上下滑動,在屏幕的右側可以看到垂直方向的位置指示器。
react-native run-ios


日韩av 中文字幕 1_亚洲第一区在线_亚洲V日韩V精品v无码专区_色鬼久久亚洲AV综合